javascript - ترجمة - react.js شرح




كيف تتعامل مع حدث onKeyPress في ReactJS؟ (6)

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

كيف يمكنني جعل حدث 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);

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

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

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



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

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


هناك بعض التحديات عندما يتعلق الأمر بضغط الحدث. مقالة جان وولتر حول الأحداث الرئيسية قديمة بعض الشيء ولكنها توضح جيدًا سبب صعوبة اكتشاف الأحداث الرئيسية.

هناك عدد قليل من الأشياء ملاحظة:

  1. keyCode ، which ، charCode لها قيمة مختلفة / معنى في keypress من keyup و keydown. يتم إهمالها جميعًا ، ومع ذلك فهي مدعومة في المتصفحات الرئيسية.
  2. نظام التشغيل ، لوحات المفاتيح الفعلية ، المتصفحات (الإصدارات) يمكن أن يكون لها تأثير على الكود / القيم الأساسية.
  3. key code هي المعيار الحديث. ومع ذلك ، لا تدعمها المتصفحات بشكل جيد وقت كتابة هذا التقرير.

لمعالجة أحداث لوحة المفاتيح في تطبيقات التفاعل ، قمت بتنفيذ react-keyboard-event-handler . ألق نظرة من فضلك.


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




onkeypress