我正在使用React Hooks编写一个表单,一切都按预期工作,除了当我在输入框中输入任何一个字符后,输入框会失去焦点。
我猜这是因为组件外部不知道组件内部的变化所导致的问题,但是我该如何解决这个问题呢?
以下是useForm Hook的代码:
import React, { useState } from "react";
export default function useForm(defaultState, label) {
const [state, setState] = useState(defaultState);
const FormComponent = () => (
<form>
<label htmlFor={label}>
{label}
<input
type="text"
id={label}
value={state}
placeholder={label}
onChange={e => setState(e.target.value)}
/>
</label>
</form>
);
return [state, FormComponent, setState];
}
这是使用 Hook 的组件:
function App() {
const [formValue, Form, setFormValue] = useForm("San Francisco, CA", "Location");
return (
<Fragment>
<h1>{formValue}</h1>
<Form />
</Fragment>
);
}
FormComponent
移到了useForm
函数外部,所以它始终指向同一个对象(与每次调用useForm
函数创建新对象的情况相反),这样 React 不再确定需要完全重新绘制FormComponent
的整个 DOM 表示形式(对象是相同的,除了输入值之外没有更改)。因此,“isFocused”或类似的标志在重新绘制期间不再丢失。请记住,每次用户输入内容时,React 都会使用更新后的状态调用useForm
。至少我是这样理解的。 - Kasparas Anusauskas