จะจัดการกับเหตุการณ์ 'onKeyPress' ใน ReactJS ได้อย่างไร

ฉันจะทำให้onKeyPressกิจกรรมทำงานใน ReactJS ได้อย่างไร ควรแจ้งเตือนเมื่อ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>
     );
}

onKeyDownตรวจจับkeyCodeเหตุการณ์

สำหรับผมอยู่เสมอแต่มีค่าที่ถูกต้อง หากใช้รหัสที่ถูกต้องในonKeyPresse.keyCode0e.charCodeonKeyDowne.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)}

พิมพ์คีย์ที่แน่นอนที่กดไปยังหน้าจอ ดังนั้นหากคุณต้องการตอบกลับกด "a" ทั้งหมดเมื่อ div อยู่ในโฟกัสคุณจะเปรียบเทียบ e.key กับ "a" - ตามตัวอักษรถ้า (e.key === "a")

มีความท้าทายบางอย่างเมื่อมันมาถึงเหตุการณ์สำคัญ บทความของ Jan Wolter เกี่ยวกับเหตุการณ์สำคัญนั้นค่อนข้างเก่า แต่อธิบายได้ดีว่าเหตุใดการตรวจจับเหตุการณ์คีย์จึงยาก

สิ่งที่ควรทราบ:

1. keyCode, which,charCodeมีค่าแตกต่างกัน / ความหมายในปุ่มกดจาก keyup และ keydown พวกเขาทั้งหมดเลิกใช้อย่างไรก็ตามได้รับการสนับสนุนในเบราว์เซอร์หลัก
2. ระบบปฏิบัติการแป้นพิมพ์กายภาพเบราว์เซอร์ (รุ่น) อาจมีผลกับรหัส / ค่าคีย์
3. keyและcodeเป็นมาตรฐานล่าสุด อย่างไรก็ตามเบราว์เซอร์ไม่ได้รับการสนับสนุนในขณะเขียน

เพื่อรับมือกับเหตุการณ์ที่เกิดขึ้นแป้นพิมพ์ในการตอบสนองต่อปพลิเคชันที่ผมดำเนินการตอบสนอง-แป้นพิมพ์ตัวจัดการเหตุการณ์ กรุณาดู

คุณสามารถตรวจสอบฟังก์ชันนี้ "pressEnter"