React 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方法。请问如何实现？

- node_man

---

分享sendMessage函数的代码。我猜你已经添加了e.preventDefault()。 - Venkat.R

问题在于当按下回车键时，您没有调用sendMessage。只需将其更改为sendMessage()即可。 - F.bernal

可能是如何在ReactJS中处理`onKeyPress`事件的重复问题？ - ravibagul91

HTML button 的默认值是 type="submit"，在文本输入框中按下 Enter 键会触发 submit 事件，因此可能会调用第一个按钮的 onClick 处理程序... 如果您将显式的 type="button" 添加到前两个按钮中，问题是否仍然存在？ - Aprillion

FTR e.key === "Enter" 更易读且不像 e.keyCode 一样被弃用。 - Aprillion

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

---

我的sendMessage定义如下：Sender.propTypes = {sendMessage: PropTypes.func}; 因此我会得到一个错误，即this.sendMessage不是一个函数。我是reactjs的新手，如果在问题中漏掉了什么，请见谅。 - node_man

@no 所以只需使用 this.props.sendMessage() - Stepan Vanzuriak

这个可以运行，但另一个问题出现了。等一下，让我在这里提一下。 - node_man

当按下回车键或提交按钮调用sendMessage时，控制权转移到此代码：handleMessageSubmit =（event）=> {const userInpu = event.target.message.value;}。当按下回车键提交时，我会收到“无法读取未定义的属性值”错误。但是，当按下提交按钮提交时，它可以完美地工作。 - node_man

当按下回车键时，使用类似于const userInpu = event.target.value;的方法可以完美地工作，但是当使用提交按钮提交时会出现错误。 - node_man

@node_man 我不确定我完全理解了一个新问题，也许你应该创建另一个问题。 - Stepan Vanzuriak

Answer 2

您的输入应该具有 onKeyPress 属性。

 onKeyPressHandler = e => {
     e.preventDefault();
     if (e.key === 'Enter') {
       // do something
     }
 };

 <input onKeyPress={this.onKeyPressHandler}/>

- Nemer

Answer 3

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

这个函数是做什么用的？它接收名为 e 的参数，如果 e.keyCode == 13，则返回一个对象 { sendMessage }（这是 { sendMessage: sendMessage } 的简写形式），否则返回一个空字符串。

根据您的意图，我认为您想要编写类似于下面的代码：

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

或者，作为一行代码：(e) => e.keyCode === 13 && sendMessage()。

- dnt

Answer 4

onKeyDown={e => {
    if (e.keyCode === 13) {
        this.sendMessage();
        e.preventDefault();
        e.stopPropagation();
    }
}}

需要使用preventDefault来阻止默认操作。

- TopW3