React - 按下“Enter”键时调用特定函数答案

【问题标题】：React - Calling a specific function when 'Enter' key is pressedReact - 按下“Enter”键时调用特定函数
【发布时间】：2020-06-25 01:56:46
【问题描述】：

未能成功使用this 线程提供帮助。我有一个带有 onClick 的按钮 div，它调用了 handleSendMessage。

我希望在用户按下“Enter”键时调用此handleSendMessage 在页面上。我怎样才能做到这一点？

组件如下所示：

    const ChatScreen = () => {
      const [message, setMessage] = useState("");
      const dispatch = useDispatch();
      let chatsFromState = useSelector(state => state.chatsState.chats);

      const socket = io("localhost:4000");

      socket.on("RECEIVE_MESSAGE", msgReceived => {
        console.log("msgReceived ", msgReceived);
      });

      const handleChange = e => setMessage(e.target.value);

      const handleSendMessage = async () => {
        socket.emit("SEND_MESSAGE", message);
        await dispatch(sendMessage(message));
        setMessage("");
      };

      return (
        <div className="chatScreen">
          <div className="">HI</div>
          <input
            value={message}
            onChange={handleChange}
            placeholder="Your message here..."
          />
          <div className="sendBtn" onClick={handleSendMessage}>
            Send
          </div>
          <div className="messagesContainer">
            {chatsFromState.map((chat, i) => (
              <div className="messageBox" key={i}>
                message : {chat.message}
              </div>
            ))}
          </div>
        </div>
      );
    };

    export default ChatScreen;

【问题讨论】：

标签： javascript reactjs keyboard

【解决方案1】：

将onKeyPress 键盘事件添加到您的输入元素，您可以捕获该键事件，然后检查key Enter。

该事件发生在input，因为这是用户获得焦点的地方，如果用户单击页面上的其他任何位置，焦点将丢失，这将不再起作用。这里的诀窍是思考焦点可能在哪里，然后倾听。

这里是一个非常检索的例子，只要确保专注于输入并按 Enter，就会记录一条消息：

const ChatScreen = () => {
  const handleChange = (e) => {
    if (e.key === 'Enter') {
      console.log('setMessage');
    }
  }

  return (<input type="text" onKeyPress={handleChange} />);
}

const root = document.getElementById('container')
 
ReactDOM.render(<ChatScreen />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container"></div>

【讨论】：