วิธีตรวจจับ Esc Key Press ใน React และวิธีจัดการ

ฉันจะตรวจจับการกดแป้น Esc บน reactjs ได้อย่างไร สิ่งที่คล้ายกับ jquery

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

เมื่อตรวจพบแล้วฉันต้องการส่งต่อข้อมูลลงส่วนประกอบ ฉันมีส่วนประกอบ 3 ส่วนซึ่งส่วนประกอบที่ใช้งานสุดท้ายต้องตอบสนองต่อการกดแป้น Escape

ฉันกำลังคิดถึงการลงทะเบียนประเภทหนึ่งเมื่อส่วนประกอบเริ่มทำงาน

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

ฉันเชื่อว่าสิ่งนี้จะได้ผล แต่ฉันคิดว่ามันจะเหมือนการโทรกลับมากกว่า มีวิธีใดที่ดีกว่านี้ในการจัดการกับปัญหานี้หรือไม่?

หากคุณกำลังมองหาการจัดการเหตุการณ์สำคัญระดับเอกสารการเชื่อมโยงระหว่างcomponentDidMountนั้นเป็นวิธีที่ดีที่สุด (ดังที่แสดงในตัวอย่าง codepen ของ 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/>
    )
  }
}

โปรดทราบว่าคุณควรตรวจสอบให้แน่ใจว่าได้ลบตัวฟังเหตุการณ์สำคัญในการยกเลิกการต่อเชื่อมเพื่อป้องกันข้อผิดพลาดที่อาจเกิดขึ้นและการรั่วไหลของหน่วยความจำ

แก้ไข: หากคุณใช้ตะขอคุณสามารถใช้useEffectโครงสร้างนี้เพื่อสร้างเอฟเฟกต์ที่คล้ายกัน:

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

คุณจะต้องการฟัง Escape keyCode(27) จาก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 ของ Brad Colthurst ที่โพสต์ไว้ในความคิดเห็นของคำถามมีประโยชน์ในการค้นหารหัสหลักสำหรับคีย์อื่น ๆ

อีกวิธีหนึ่งในการทำสิ่งนี้ให้สำเร็จในองค์ประกอบที่ใช้งานได้คือการใช้useEffectและuseFunctionเช่นนี้:

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

แทนที่จะเป็น console.log คุณสามารถใช้useStateทริกเกอร์บางสิ่งได้

ตอบสนองการใช้งานSyntheticKeyboardEventห่อเหตุการณ์เบราว์เซอร์และเหตุการณ์การสังเคราะห์นี้จะให้ชื่อแอตทริบิวต์ที่สำคัญ ,
ซึ่งคุณสามารถใช้เช่นนี้

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

สำหรับโซลูชัน React hook ที่ใช้ซ้ำได้

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

การใช้งาน:

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