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




react.js download (3)

كيف يمكنني اكتشاف 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)}/>
    )
  }
}

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


إذا كنت تبحث عن معالجة حدث مفتاح على مستوى المستند ، فإن 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/>
    )
  }
}

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


سترغب في الاستماع للحصول على 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 المنشور في تعليقات السؤال مفيدًا في العثور على رموز المفاتيح للمفاتيح الأخرى.


يستخدم 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();
  }
};




reactjs