Reactjs中如何阻止表单按enter键提交时组件自动刷新

问题原因 #

HTML 原生的 <form> 表单存在默认行为：当表单内只有一个输入框时，按下回车键会自动触发表单提交动作，默认会刷新整个页面，这就是你遇到组件重载的根因。

解决方法 #

只需要给 <form> 元素绑定 onSubmit 事件，在事件回调中调用 preventDefault() 阻止默认提交行为即可，修改后的完整代码如下：

import React, { useState } from "react";
import data from "./info.json";
function App() {
  const [searchTerm, setSearch] = useState(null);

  return (
    <div>
      {/* 绑定onSubmit事件阻止默认提交刷新 */}
      <form onSubmit={(e) => e.preventDefault()}>
        <input
          type="text"
          placeholder="Search"
          onChange={(e) => setSearch(e.target.value)}
        />
      </form>

      {data
        .filter((item) => {
          if (searchTerm == null) return item;
          return item.name.toLowerCase().includes(searchTerm.toLowerCase());
        })
        .map((item) => (
          <li key={item.name}>{item.name}</li>
        ))}
    </div>
  );
}

export default App;

补充说明 #

• 如果你需要按下回车键时主动触发搜索逻辑，也可以把对应的处理代码写到 onSubmit 的回调函数中，不会再触发页面重载。
• 示例代码中我把 filter、map 里的参数名从 data 改成了 item，避免和外层导入的 data 重名，同时给 li 元素添加了 key 属性，符合 React 语法规范，避免控制台告警。

内容的提问来源于stack exchange，提问作者Wani