javascript شرح - كيف للكشف عن مفتاح Esc اضغط على رد الفعل وكيفية التعامل معها




ترجمة react (4)

سترغب في الاستماع إلى keyCode الهروب (27) من onKeyDown SyntheticKeyBoardEvent onKeyDown :

const EscapeListen = React.createClass({
  handleKeyDown: function(e) {
    if (e.keyCode === 27) {
      console.log('You pressed the escape key!')
    }
  },

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

codepen.io/anon/pen/ZOzaPW نشر في تعليقات السؤال مفيد للعثور على رموز المفتاح لمفاتيح أخرى.

كيف يمكنني الكشف عن Esc keypress على reactjs؟ الشيء نفسه إلى jquery

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

بمجرد اكتشافه ، أريد تمرير مكونات المعلومات لأسفل. لدي 3 مكونات يحتاج منها العنصر الأخير الأخير للتفاعل مع الضغط على مفتاح الهروب.

كنت أفكر في نوع من التسجيل عندما يصبح العنصر نشطًا

class Layout extends React.Component {
  onActive(escFunction){
    this.escFunction = escFunction;
  }
  onEscPress(){
   if(_.isFunction(this.escFunction)){
      this.escFunction()
   }
  }
  render(){
    return (
      <div class="root">
        <ActionPanel onActive={this.onActive.bind(this)}/>
        <DataPanel onActive={this.onActive.bind(this)}/>
        <ResultPanel onActive={this.onActive.bind(this)}/>
      </div>
    )
  }
}

وعلى جميع المكونات

class ActionPanel extends React.Component {
  escFunction(){
   //Do whatever when esc is pressed
  }
  onActive(){
    this.props.onActive(this.escFunction.bind(this));
  }
  render(){
    return (   
      <input onKeyDown={this.onActive.bind(this)}/>
    )
  }
}

أعتقد أن هذا سيعمل ولكنني أعتقد أنه سيكون أشبه باستدعاء. هل هناك طريقة أفضل للتعامل مع هذا؟


تستخدم ميزة React SyntheticKeyboardEvent لتغليف حدث المتصفح الأصلي ويوفر هذا الحدث Synthetic سمة رئيسية تحمل الاسم ،
والتي يمكنك استخدامها على النحو التالي:

handleOnKeyDown = (e) => {
  if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
    // select item
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    // go to top item
    e.preventDefault();
  } else if (e.key === 'ArrowDown') {
    // go to bottom item
    e.preventDefault();
  } else if (e.key === 'Escape') {
    // escape
    e.preventDefault();
  }
};

إذا كنت تبحث عن التعامل مع حدث رئيسي على مستوى المستند ، فإن codepen.io/anon/pen/ZOzaPW خلال componentDidMount هو أفضل طريقة (كما هو موضح codepen.io/anon/pen/ZOzaPW بـ codepen.io/anon/pen/ZOzaPW ):

class ActionPanel extends React.Component {
  constructor(props){
    super(props);
    this.escFunction = this.escFunction.bind(this);
  }
  escFunction(event){
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }
  componentDidMount(){
    document.addEventListener("keydown", this.escFunction, false);
  }
  componentWillUnmount(){
    document.removeEventListener("keydown", this.escFunction, false);
  }
  render(){
    return (   
      <input/>
    )
  }
}

لاحظ أنه يجب التأكد من إزالة وحدة إصغاء الحدث الرئيسية لإلغاء تحميلها لمنع الأخطاء المحتملة وعمليات تسرب الذاكرة.


وفقًا لـ Accessoors المحدد في ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf ، P67) ، هناك طريقتان يمكنك القيام به لإضافة خصائص إلى كائن موجود. كل هذين الطريقين ، يعاملهما محرك جافا سكريبت بنفس الطريقة.

الطريقة الأولى هي استخدام الترميز النقطي:

obj.key3 = value3;

ولكن بهذه الطريقة ، يجب عليك استخدام IdentifierName بعد تدوين النقطة.

الطريقة الثانية هي استخدام تدرج قوس:

obj["key3"] = value3;

وشكل آخر:

var key3 = "key3";
obj[key3] = value3;

بهذه الطريقة ، يمكنك استخدام Expression (تضمين IdentifierName ) في تدوين قوس.





javascript reactjs