Question

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

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

form

基本上，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> );是用户提交表单时submittedSearchTerm的快照。这行得通，但是感觉不得不复制状态很奇怪。

是否有一种通用的方法可以更优雅地解决此问题？

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>
);

？

Answer 2

如果我理解您的问题，我真的不认为您需要复制该输入的状态。为什么不像这样在handleSubmit内部抓取

：

const handleSubmit = (e) => {
  e.preventDefault()
  // fetch here
}

如果要优化，请使用useCallback，并且不会在每个渲染周期创建上一个函数：

const handleSubmit = useCallback((e) => {
  e.preventDefault()
  // fetch here
}, [])

对于更复杂的形式，我建议使用此lib https://github.com/jaredpalmer/formik

是否将表单输入保存为React中onChange或onSubmit的状态

2 个答案: