javascript شرح - التعامل مع الحدث KeyPress في reactJs



ترجمة react.js (7)

رد الفعل لا يمر عليك نوع الأحداث التي قد تظن. بدلا من ذلك ، فإنه يمر الأحداث الاصطناعية .

في اختبار موجز ، يكون event.keyCode == 0 دائمًا صحيحًا. ما تريده هو event.charCode

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

كيف يمكنني عمل حدث KeyPress في React JS. يجب أن يتم enter (keyCode=13) عند enter (keyCode=13) .


بالنسبة لي 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>
      );
    }
  });

رد فعل أحداث لوحة المفاتيح https://facebook.github.io/react/docs/events.html#keyboard-events


أعمل مع 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>
     );
}

إذا كنت ترغب في تمرير معلمة ديناميكية من خلال وظيفة ، داخل مدخل ديناميكي:

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

أمل أن هذا يساعد شخصاما. :)


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

onKeyDown بالكشف عن أحداث keyCode .


في وقت متأخر للحفل ، ولكن كنت أحاول القيام بذلك في TypeScript وخرجت مع هذا:

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

هذا يطبع المفتاح المحدد الضغط على الشاشة. لذا إذا كنت تريد الرد على جميع المطابع "a" عندما يكون div في بؤرة التركيز ، فستقارن e.key بـ "a" - حرفيًا إذا (e.key === "a").


يمكنك استخدام كل من المعالجات نفس الوقت.

في أونكيدون يمكنك التحقق من المفتاح. إذا كان event.preventDefault() لمنع مكالمة event.preventDefault() ، أو إذا لم يكن - لا تفعل شيئا

لا يحتوي طابور حدث جافا سكريبت على حدث change حتى يتم استدعاء المعالج الافتراضي لحدث keydown . إذا قمت بالاتصال event.preventDefault() في معالج onKeyDown سيتم إطلاق أي حدث change .





javascript reactjs