按下回车键时将js调用反应到一个函数

Question

这是我的反应 js 应用程序的片段：

 <form className="rcw-sender" onKeyDown={(e)=> e.keyCode == 13 ? {sendMessage}: ''} onSubmit={sendMessage}>
  {this.state.active && <Container>
    <EmojiPicker />
  </Container>}
  <button className="rcw-send" onClick={activateEmoji}>
    <img src={emojibutton} className="rcw-send-icon" alt="send" />
  </button>
  <button className="rcw-send" onClick={activateMenu}>
    <img src={menubutton} className="rcw-send-icon" alt="send" />
  </button>

  <input type="text" className="rcw-new-message" name="message" placeholder={placeholder} disabled={disabledInput}
    autoFocus={autofocus} autoComplete="off" ref={this.input} />
  <button type="submit" className="rcw-send">
    <img src={send} className="rcw-send-icon" alt="send" />
  </button>
</form>

在我的表单中 onSubmit={sendMessage} 在我按下提交按钮时被调用，这非常有效。但我希望在按回车键提交表单时调用相同的 sendMessage 。为此，我有这段代码 onKeyDown={(e)=> e.keyCode == 13 ? {sendMessage}: ''} 我想从中调用 sendMessage 按下回车键时调用的方法，但它似乎不起作用。我想这样做是因为我的应用程序中有一个表情符号选择器，当我使用回车键提交表单时，表情符号选择器就会显示出来。因此，为了解决这个问题，我想在按下回车键提交表单时调用 sendMessage 方法。使用提交按钮提交表单不会切换表情符号选择器的状态。这就是为什么我想在按下回车键时调用 sendMessage 方法来快速解决问题。我该怎么做？

原文由 node_man 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试将您的 onKeyDownHandler 移至单独的函数并仅添加 if 语句

  onKeyDownHandler = e => {
    if (e.keyCode === 13) {
      this.sendMessage();
    }
  };

  render() {
    ... your other code
    return (
      <form
        className="rcw-sender"
        onKeyDown={this.onKeyDownHandler}
        onSubmit={sendMessage}
      >
        {this.state.active && (
          <Container>
            <EmojiPicker />
          </Container>
        )}
        <button className="rcw-send" onClick={activateEmoji}>
          <img src={emojibutton} className="rcw-send-icon" alt="send" />
        </button>
        <button className="rcw-send" onClick={activateMenu}>
          <img src={menubutton} className="rcw-send-icon" alt="send" />
        </button>

        <input
          type="text"
          className="rcw-new-message"
          name="message"
          placeholder={placeholder}
          disabled={disabledInput}
          autoFocus={autofocus}
          autoComplete="off"
          ref={this.input}
        />
        <button type="submit" className="rcw-send">
          <img src={send} className="rcw-send-icon" alt="send" />
        </button>
      </form>
    );
  }

原文由 Stepan Vanzuriak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

(e)=> e.keyCode == 13 ? {sendMessage}: ''

那么该函数的作用是什么？ It takes a parameter named e , and then if e.keyCode == 13 it returns an object { sendMessage } (which is sugar for { sendMessage: sendMessage } ), otherwise it返回空字符串。

根据你的意图，我想你想写这样的东西：

 (e) => {
  if (e.keyCode === 13)
    sendMessage();
}

或者，作为单行 (e) => e.keyCode === 13 && sendMessage() 。

原文由 dnt 发布，翻译遵循 CC BY-SA 4.0 许可协议