Cách phát hiện Esc Key Press trong React và cách xử lý nó

Làm cách nào để phát hiện phím Esc trên reactjs? Điều tương tự với jquery

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

Sau khi phát hiện, tôi muốn chuyển các thành phần thông tin xuống. Tôi có 3 thành phần trong đó thành phần hoạt động cuối cùng cần phản ứng với phím thoát.

Tôi đã nghĩ đến một kiểu đăng ký khi một thành phần hoạt động

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

và trên tất cả các thành phần

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

Tôi tin rằng điều này sẽ hiệu quả nhưng tôi nghĩ nó sẽ giống như một cuộc gọi lại hơn. Có cách nào tốt hơn để xử lý điều này không?

Nếu bạn đang tìm kiếm cách xử lý sự kiện khóa cấp tài liệu, thì liên kết nó trong suốt componentDidMountlà cách tốt nhất (như được hiển thị trong ví dụ codepen của Brad Colthurst ):

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

Lưu ý rằng bạn nên đảm bảo loại bỏ trình xử lý sự kiện quan trọng khi ngắt kết nối để tránh các lỗi tiềm ẩn và rò rỉ bộ nhớ.

CHỈNH SỬA: Nếu bạn đang sử dụng hook, bạn có thể sử dụng useEffectcấu trúc này để tạo ra hiệu ứng tương tự:

const ActionPanel = (props) => {
  const escFunction = useCallback((event) => {
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }, []);

  useEffect(() => {
    document.addEventListener("keydown", escFunction, false);

    return () => {
      document.removeEventListener("keydown", escFunction, false);
    };
  }, []);

  return (   
    <input />
  )
};

Bạn sẽ muốn nghe thoát keyCode(27) từ ReactSyntheticKeyBoardEvent 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 của Brad Colthurst được đăng trong phần nhận xét của câu hỏi rất hữu ích cho việc tìm mã khóa cho các khóa khác.

Một cách khác để thực hiện điều này trong một thành phần chức năng, là sử dụng useEffectvà useFunction, như sau:

import React, { useEffect } from 'react';

const App = () => {


  useEffect(() => {
    const handleEsc = (event) => {
       if (event.keyCode === 27) {
        console.log('Close')
      }
    };
    window.addEventListener('keydown', handleEsc);

    return () => {
      window.removeEventListener('keydown', handleEsc);
    };
  }, []);

  return(<p>Press ESC to console log "Close"</p>);
}

Thay vì console.log, bạn có thể sử dụng useStateđể kích hoạt một cái gì đó.

React sử dụng SyntheticKeyboardEvent để bao bọc sự kiện trình duyệt gốc và sự kiện Synthetic này cung cấp thuộc tính khóa được đặt tên ,
bạn có thể sử dụng thuộc tính này như sau:

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

Đối với giải pháp móc React có thể tái sử dụng

import React, { useEffect } from 'react';

const useEscape = (onEscape) => {
    useEffect(() => {
        const handleEsc = (event) => {
            if (event.keyCode === 27) 
                onEscape();
        };
        window.addEventListener('keydown', handleEsc);

        return () => {
            window.removeEventListener('keydown', handleEsc);
        };
    }, []);
}

export default useEscape

Sử dụng:

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false))