reactjs - 在 React 的文本区域中按下 Enter 键时提交表单？

Question

当用户在<textarea>中按下Enter时，如何使表单提交？默认行为是在 <textarea> 中插入换行符.

<form className="" onSubmit={newComment}>
    <textarea type="text" rows="3" name="body" />
    <button className="btn" type="submit">
        Comment
    </button>
</form>

我应该有一个 onChange事件于 <textarea> ，并在功能测试中查看是否按下了 Enter 键？这就是我使用普通 JavaScript 执行此操作的方法，但我无法在 React 的合成事件中找到关键事件。

Answer 1

您的文本区域是不受控制的元素。这是一种可以接受的方法，但是 Facebook 鼓励使用受控输入。

无论如何，以下是如何针对不受控制的表单执行此操作:

onEnterPress = (e) => {
  if(e.keyCode == 13 && e.shiftKey == false) {
    e.preventDefault();
    this.myFormRef.submit();
  }
}

render() {
  return (
    <form ref={el => this.myFormRef = el} className="">
      <textarea type="text" rows="3" name="body" onKeyDown={this.onEnterPress} />
      <button className="btn" type="submit">
        Comment
      </button>
    </form>
  );
}

您还可以使用 id 代替上面的 refs。