javascript - React 中 onChange 或 onSubmit 中是否将表单输入保存到状态

Question

我刚开始学习React，就遇到了这个问题，我认为应该有一个常规的方法来解决它。

我有一个包含输入的表单。我开始将 input 制作为受控组件，将其值绑定(bind)到状态变量并更新 input 的 onChange 中的状态。但是，此表单是搜索栏的一部分，我不想在用户键入时触发搜索。我只想在用户提交表单时触发搜索。因此，我必须创建一个新的状态变量(我正在使用钩子(Hook))，代码如下所示:

const [searchTerm, setSearchTerm] = useState(DEFAULT_VALUE);
const [submittedSearchTerm, setSubmittedSearchTerm] = useState(DEFAULT_VALUE);

useEffect(() => {
  // fetch search results
}, [submittedSearchTerm]);

...

function handleChange(e) {
  setSearchTerm(e.target.value);
}

function handleSubmit(e) {
  setSubmittedSearchTerm(searchTerm);
  e.preventDefault();
}

// Simplified
return (
  <form onSubmit={handleSubmit}>
    <input value={searchTerm} onChange={handleChange} />
  </form>
);

基本上，subscribedSearchTerm 是用户提交表单时 searchTerm 的快照。这可行，但必须复制状态感觉很奇怪。

有没有一种通用的方法可以更优雅地解决这个问题？

Answer 1

除非您需要在组件渲染上进行提取，否则这样做有什么问题:

const [searchTerm, setSearchTerm] = useState(DEFAULT_VALUE);

useEffect(() => {
  // do stuff that should be done on component render
}, []);

...

function handleChange(e) {
  setSearchTerm(e.target.value);
}

function handleSubmit(e) {
  e.preventDefault();
  // fetch search results
}

// Simplified
return (
  <form onSubmit={handleSubmit}>
    <input value={searchTerm} onChange={handleChange} />
  </form>
);

？