반응에서 Esc 키 누름 감지 방법 및 처리 방법

반응에서 Esc 키 누름 감지 방법 및 처리 방법

리액션에서 Esc 키를 어떻게 감지합니까?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)}/>
    )
  }
}

나는 이것이 효과가 있을 것이라고 믿지만 나는 이것이 콜백에 더 가깝다고 생각한다.이 문제를 해결할 더 좋은 방법이 있나요?

문서 수준의 키 이벤트 처리를 찾는 경우 다음 중 바인딩componentDidMount(Brad Colthurst의 코드펜 예에서 알 수 있듯이)가 최선의 방법입니다.

class ActionPanel extends React.Component {
  constructor(props){
    super(props);
    this.escFunction = this.escFunction.bind(this);
  }
  escFunction(event){
    if (event.key === "Escape") {
      //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.key === "Escape") {
      //Do whatever when esc is pressed
    }
  }, []);

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

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

  return (   
    <input />
  )
};

리액트 17의 편집: 리액트에 의해 문서 수준의 이벤트 바인딩 처리 방법이 변경되어 체인의 어느 시점에서 이 구현이 정지될 수 있습니다.event.stopPropogation()호출됩니다.청취자의 마지막 인수를 로 변경하여 이 함수가 먼저 호출되도록 할 수 있습니다.true보다는false이렇게 하고 전화도 하면event.stopPropogation()이전에 호출되었던 다른 핸들러는 더 이상 실행되지 않으므로 가능하면 그 콜을 피하는 것이 좋습니다.

기능 컴포넌트에서 이를 실현하는 또 다른 방법은useEffect, 다음과 같이 합니다.

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무언가를 촉발시키는 것.

넌 탈출의 소리를 듣고 싶을 거야keyCode(27) 반응으로부터 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} />
    )
  }
})

질문의 코멘트에 게재된 브래드 콜더스트의 코드펜은 다른 키의 키 코드를 찾는 데 도움이 됩니다.

재사용 가능한 리액트 훅 솔루션

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

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

function handleEsc(event) {
    if (event.keyCode === 27) {
      close();
    }
  }

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

후크가 아닌 컴포넌트에서 직접 동작하도록 하고 싶은 경우, 또는 저처럼 후크에 사용하고 있는 경우, <컴포넌트>를 반환하지 않는 경우.

useEffect(()=>{
    document.addEventListener('keydown', (e) => {
      e.key === 'Escape' && setOpenState(false)
    })
    return () => {
      document.removeEventListener('keydown', (e) => e)
    }
  },[openState])

리액트 훅

const [add, setAdd] = useState(false);
useEffect(()=>{
        document.addEventListener("keydown", keydownFunction, false);
        return  () => { document.removeEventListener("keydown", keydownFunction, false); };
    }, []);
const keydownFunction =(event)=>{
        if (event.key === "Escape") {  setAdd(false); }
        if (event.key === "+") { setAdd(true); }) }
}

언급URL : https://stackoverflow.com/questions/37440408/how-to-detect-esc-key-press-in-react-and-how-to-handle-it