React中按下回车键页面重载问题求助：需触发添加任务而非刷新

问题根源 #

1. handleKeyDown未绑定到输入框：你写的handleKeyDown函数没有关联到<input>元素，按下回车时该函数根本不会执行，自然无法阻止页面重载。
2. 表单默认提交行为未被拦截：在表单内按下回车键，浏览器会触发表单的默认提交行为（跳转页面），而你的表单没有绑定onSubmit事件来处理这个行为，仅靠按钮点击的handleSubmit无法覆盖回车场景。

两种可行修复方案 #

方案一：补全键盘事件绑定

• 给<input>添加onKeyDown绑定，让回车事件能触发处理函数
• 移除handleKeyDown里默认的event.preventDefault()，只在回车触发时阻止默认行为（避免影响输入框的正常输入操作）

修改后的关键代码：

handleKeyDown = (event) => {
  if (event.key === "Enter") {
    event.preventDefault(); // 仅在回车时阻止默认行为
    this.handleSubmit(event);
  }
};

// render中的input元素
<input
  type="text"
  placeholder="Do homework at 3pm"
  onChange={this.handleChangeInput}
  autoFocus
  onKeyDown={this.handleKeyDown} // 新增事件绑定
/>

方案二：利用表单原生onSubmit事件（推荐）

直接给表单绑定onSubmit事件，浏览器会自动处理回车提交和点击提交按钮两种场景，代码更简洁规范：

1. 给<form>添加onSubmit={this.handleSubmit}绑定
2. 将"Add task"按钮的type从button改为submit
3. 可以删除冗余的handleKeyDown函数

修改后的完整代码：

handleSubmit = (event) => {
  event.preventDefault();
  if (!this.state.input) {
    alert("You need to write a task!");
    return;
  }
  this.props.addNewTask({
    id: Math.floor(Math.random() * 1000 + 1),
    value: this.state.input,
  });
  this.setState({ showAddTask: false, input: "" });
};

render() {
  return (
    <div className="main-add-task">
      {this.state.showAddTask ? (
        <form className="add-task-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="Do homework at 3pm"
            onChange={this.handleChangeInput}
            autoFocus
          />
          <div className="change-button">
            <button type="button" onClick={this.handleCancel}>
              Cancel
            </button>
            <button type="submit">
              Add task
            </button>
          </div>
        </form>
      ) : (
        <button onClick={this.handleShow}>Add Task</button>
      )}
    </div>
  );
}
}

export default AddTask;

说明 #

方案二更贴合HTML表单的原生行为，无需额外处理键盘事件，同时能覆盖所有提交场景，代码维护性更高。

内容的提问来源于stack exchange，提问作者Dinh Khoi Nguyen