ReactJS에서 'onKeyPress'이벤트를 처리하는 방법은 무엇입니까?

onKeyPressReactJS 에서 이벤트를 어떻게 작동시킬 수 있습니까? enter (keyCode=13)누를 때 경고해야합니다 .

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);

React 0.14.7로 작업하고 있으며 사용 onKeyPress하고 event.key잘 작동합니다.

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>
     );
}

onKeyDownkeyCode이벤트를 감지 합니다.

나를 위해 onKeyPress은 e.keyCode항상 0있지만, e.charCode정확한 값을 가지고있다. 경우 사용 onKeyDown에 올바른 코드를 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>
      );
    }
  });

키보드 이벤트 반응 .

Keypress 이벤트는 더 이상 사용되지 않으므로 대신 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} /> 
}

리 액트는 당신이 생각할만한 종류의 사건을 전달하지 않습니다. 오히려, 그것은 합성 사건을 통과하고 있습니다 .

간단한 테스트에서는 event.keyCode == 0항상 사실입니다. 당신이 원하는 것은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>
        );
     }
});

동적 입력을 동적 입력 내부의 함수에 전달하려면 다음을 수행하십시오.

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

이것이 누군가를 돕기를 바랍니다. :)

파티에 늦었지만 TypeScript 에서이 작업을 수행하려고 시도했으며 다음을 수행했습니다.

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

화면에 누른 정확한 키를 인쇄합니다. 따라서 div에 포커스가있을 때 모든 "a"프레스에 응답하려면 e.key를 "a"와 비교합니다. 문자 그대로 if (e.key === "a")입니다.

키 누르기 이벤트와 관련하여 몇 가지 문제가 있습니다. 주요 이벤트에 대한 Jan Wolter의 기사 는 약간 오래되었지만 주요 이벤트 감지가 어려운 이유를 잘 설명합니다.

몇 가지 참고할 사항 :

1. keyCode, which, charCode의 keyup과를 keyDown에서 키를 누를 때의 의미를 / 다른 값을 가지고있다. 더 이상 사용되지 않지만 주요 브라우저에서는 지원됩니다.
2. 운영 체제, 물리적 키보드, 브라우저 (버전)는 모두 키 코드 / 값에 영향을 줄 수 있습니다.
3. key그리고 code최근 표준입니다. 그러나 작성 당시에는 브라우저에서 제대로 지원되지 않습니다.

반응 앱에서 키보드 이벤트를 해결하기 위해 react-keyboard-event-handler를 구현했습니다 . 한번 봐주세요.

이 기능을 확인할 수 있습니다 "pressEnter"