React - 按下 'Enter' 键时调用特定函数

Question

没有成功使用线程来帮助。我有一个按钮 div 和一个 onClick 调用 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;

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

React - 按下 'Enter' 键时调用特定函数

React - Calling a specific function when 'Enter' key is pressed

javascript

keyboard

reactjs