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

【问题标题】：React js call to a function when enter key is pressed按下回车键时对函数的反应js调用
【发布时间】：2019-11-29 17:17:39
【问题描述】：

这是我的 react js 应用程序中的一个 sn-p：

<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 方法。我该怎么做？

【问题讨论】：

分享sendMessage函数代码。我猜你会添加 e.preventDefault()
问题是按下回车键时你没有调用sendMessage。只需将其更改为 sendMessage()
How to handle the `onKeyPress` event in ReactJS?的可能重复
HTML button 的默认值是type="submit"，在文本输入中按 Enter 会触发 submit 事件，因此可能会调用第一个按钮的 onClick 处理程序...是否有问题如果您在前 2 个按钮中添加显式 type="button" 是否仍然存在？
FTR e.key === "Enter" 更具可读性，not deprecated like e.keyCode

标签： javascript reactjs

【解决方案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>
    );
  }

【讨论】：

我的 sendMessage 是这样定义的 Sender.propTypes = {sendMessage: PropTypes.func};因此，我收到一个错误 this.sendMessage is not a function。我是 reactjs 新手，如果我错过了问题中的某些内容，我很抱歉
@no 所以就用 this.props.sendMessage()
这可行，但出现了另一个问题。等等让我在这里提一下
当通过按下回车键/或提交按钮调用 sendMessage 时，控件转到此代码：handleMessageSubmit = (event) => {const userInpu =event.target.message.value;}。按回车键提交时，我无法读取未定义的属性值。按提交按钮提交时完美运行。
这样做就像 const userInpu = event.target.value;按下回车键时工作正常，但使用提交按钮提交时出错

【解决方案2】：

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

那么这个函数是做什么的呢？它接受一个名为e 的参数，然后如果e.keyCode == 13 它返回一个对象{ sendMessage }（这是{ sendMessage: sendMessage } 的糖），否则它返回一个空字符串。

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

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

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

【讨论】：

【解决方案3】：

你的输入应该有 attr onKeyPress

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

 <input
  onKeyPress={this.onKeyPressHandler}
  />

【讨论】：

【解决方案4】：

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

需要preventDefault 来防止默认操作。

【讨论】：