Làm thế nào để xử lý sự kiện `onKeyPress` trong ReactJS?

Làm cách nào để tôi có thể làm cho onKeyPresssự kiện hoạt động trong ReactJS? Nó sẽ cảnh báo khi enter (keyCode=13)được nhấn.

var Test = React.createClass({
    add: function(event){
        if(event.keyCode == 13){
            alert('Adding....');
        }
    },
    render: function(){
        return(
            <div>
                <input type="text" id="one" onKeyPress={this.add} />    
            </div>
        );
    }
});

React.render(<Test />, document.body);

Tôi đang làm việc với React 0.14.7, sử dụng onKeyPressvà event.keyhoạt động tốt.

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}

render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownphát hiện keyCodesự kiện.

Đối với tôi onKeyPresssự e.keyCodeluôn luôn là 0, nhưng e.charCodecó giá trị đúng. Nếu sử dụng onKeyDownđúng mã trong e.charCode.

var Title = React.createClass({
    handleTest: function(e) {
      if (e.charCode == 13) {
        alert('Enter... (KeyPress, use charCode)');
      }
      if (e.keyCode == 13) {
        alert('Enter... (KeyDown, use keyCode)');
      }
    },
    render: function() {
      return(
        <div>
          <textarea onKeyPress={this.handleTest} />
        </div>
      );
    }
  });

Phản ứng sự kiện bàn phím .

Sự kiện nhấn phím không được chấp nhận, thay vào đó, bạn nên sử dụng sự kiện Keydown.

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}

React không truyền cho bạn loại sự kiện bạn có thể nghĩ. Thay vào đó, nó đang vượt qua các sự kiện tổng hợp .

Trong một thử nghiệm ngắn, event.keyCode == 0luôn luôn đúng. Những gì bạn muốn làevent.charCode

var Test = React.createClass({
     add: function(event){
         if(event.key === 'Enter'){
            alert('Adding....');
         }
     },
     render: function(){
        return(
           <div>
            <input type="text" id="one" onKeyPress={(event) => this.add(event)}/>    
          </div>
        );
     }
});

Nếu bạn muốn truyền thông số động cho một hàm, bên trong đầu vào động ::

<Input 
  onKeyPress={(event) => {
    if (event.key === "Enter") {
      this.doSearch(data.searchParam)
    }
  }}
  placeholder={data.placeholderText} />
/>

Hy vọng điều này sẽ giúp được ai đó. :)

Đến bữa tiệc muộn, nhưng tôi đã cố gắng hoàn thành việc này trong TypeScript và nghĩ ra điều này:

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

Điều này in phím chính xác được nhấn vào màn hình. Vì vậy, nếu bạn muốn phản hồi tất cả "a" nhấn khi div nằm trong tiêu điểm, bạn sẽ so sánh e.key với "a" - theo nghĩa đen nếu (e.key === "a").

Có một số thách thức khi nói đến sự kiện nhấn phím. Bài viết của Jan Wolter về các sự kiện chính hơi cũ nhưng giải thích rõ tại sao việc phát hiện sự kiện chính có thể khó khăn.

Một số điều cần lưu ý:

1. keyCode, which, charCodeCó giá trị khác nhau / ý nghĩa trong bấm phím từ KeyUp và KeyDown. Tất cả đều không dùng nữa, tuy nhiên được hỗ trợ trong các trình duyệt chính.
2. Hệ điều hành, bàn phím vật lý, trình duyệt (phiên bản) đều có thể có tác động đến mã / giá trị chính.
3. keyvà codelà tiêu chuẩn gần đây. Tuy nhiên, chúng không được hỗ trợ tốt bởi các trình duyệt tại thời điểm viết.

Để giải quyết các sự kiện bàn phím trong các ứng dụng phản ứng, tôi đã triển khai trình xử lý sự kiện bàn phím . Xin hãy xem.

bạn có thể kiểm tra chức năng này "nhấn Enter"