受控形式很方便，因为它们可以对不同值进行薄的控制。但是，它们往往有点冗长。
在另一侧，不受控制的形式通常更短并且更可读。他们让浏览器本地处理组件，减少受控组件所需的样板。
注意：本文的法语翻译存在于on my website
受控形式
例如，让我们以此形式。我们有四个输入，如果“存在”复选框没有勾选，则“饮食”将被禁用。
在这里，我们需要手动处理所有字段。这起作用了，但是当HTML独自一人很好地处理它时，似乎是不必要的。
不受控制的形式
让我们以不受控制的表格为例。
const action = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log("Saving...", Object.fromEntries(data.entries()));
};
const App = () => {
return (
<div className="App">
<form onSubmit={action}>
<fieldset>
<legend>Identity</legend>
<div>
<label for="name">Name : </label>
<input id="name" name="name" defaultValue="Chris" />
</div>
<div>
<label for="email">Email : </label>
<input id="email" type="email" name="email" defaultValue="chris@email.test" />
</div>
</fieldset>
<fieldset>
<legend>Event</legend>
<div>
<label for="presence">Presence : </label>
<input id="presence" type="checkbox" name="presence" defaultChecked />
</div>
<div>
<label for="diet">Diet : </label>
<input id="diet" name="diet" />
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
);
};
我们可以在这里注意到两个主要更改：
- 我们有逻辑（因此更少的错误）。我们不需要提交动作之前的形式价值，那么为什么要存储它们？
-
action直接从事件中读取价值。由于它不使用React状态，因此我们可以在组件之外提取它，并更容易将代码拆分。
哦，也许是最后一点：我们不再处理禁用字段。我们开始做吧！
使用不受控制的表格访问状态
我们需要读取“存在”复选框的当前价值，以禁用“饮食”字段。使用受控组件，很容易。在这里，不太如此。
解决此问题的解决方案是在表单本身上添加onChange侦听器。它将提供仅读取表单当前值的访问。
const App = () => {
const [formData, setFormData] = useState(new FormData())
return (
<div className="App">
<form onSubmit={action} onChange={(event) => setFormData(new FormData(event.currentTarget))}>
然后，在diet字段上，我们补充：
<div>
<label for="diet">Diet : </label>
<input
id="diet"
name="diet"
disabled={formData.get("presence") !== "on"}
/>
</div>
给出了最终结果：