按下回车键时对函数的 js 调用反应

Question

这是我的 react 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方法，我想在按下 Enter 键时调用方法。我该怎么做？

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