Cách kích hoạt sự kiện nhấn phím trong React.js

Question

Tôi là người mới sử dụng React.js. Tôi đang cố gắng kích hoạt sự kiện nhấn phím cho div văn bản.

đây là mã hộp văn bản mà tôi muốn thực thi kích hoạt bấm phím.

<div id="test23" contenteditable="true" class="input" placeholder="type a message" data-reactid="137">Hii...</div> 

và phương pháp bấm phím là

onKeyPress: function(e) { 
    return "Enter" == e.key ? "Enter key event triggered" : void 0) 
} 

Tôi đã thử nó với jquery nhưng tôi không thể kích hoạt nó.

đây là mã Phản ứng mà tôi đã thử nhưng không hoạt động.

var event = new Event('keypress', { 
'keyCode' : 13, 
'which' : 13, 
'key' : 'Enter' 
}); 
var node = document.getElementById('test23'); 
node.dispatchEvent(event); 

Cảm ơn :)

Answer 1

tôi đã không kiểm tra mã này, nhưng về cơ bản onKeyDown nên được xử lý như thế này. Hi vọng điêu nay co ich.

class TextInput extends Component { 

      constructor(props) { 
       super(props) 
       this.state = { value: 'hi'} 
      } 

      onKeyPress: event => { 
       if(event.key == 'Enter') { 
        this.setState({ value: event.target.value }) 
       } 
      } 

      render() { 

       return(
         <input type="text" onKeyPress={this.onKeyPress} />      
       ); 
      } 
     }); 

Answer 2

Kiểm tra util Simulate được thiết kế để kích hoạt sự kiện trong khi kiểm tra đơn vị.

Answer 3

Tại sao bạn sử dụng div cùng với một keyPress? Có lẽ, bạn có thể thử thay thế div trên <input onKeyPress={this.handle} /> https://stackoverflow.com/a/34634290/3051131