Tanstack Form 在与表单交互时不会导致重新渲染。 因此，您可能会发现自己试图使用表单或字段状态值但没有成功。
如果您想访问响应式值，您需要使用以下两种方法之一订阅它们： useStore 或 form.Subscribe 组件。
这些订阅的一些用途是渲染最新的字段值、根据条件确定要渲染的内容，或在组件的逻辑中使用字段值。
对于您想要“响应”触发器的情况，请查看 listener API。
useStore hook 非常适合您需要在组件逻辑中访问表单值的情况。useStore 接受两个参数。 首先，表单存储。 其次，一个选择器，用于微调您希望订阅的表单部分。
const firstName = useStore(form.store, (state) => state.values.firstName)
const errors = useStore(form.store, (state) => state.errorMap)
const firstName = useStore(form.store, (state) => state.values.firstName)
const errors = useStore(form.store, (state) => state.errorMap)
您可以在选择器中访问表单状态的任何部分。
请注意，每当订阅的值发生更改时，useStore 都会导致整个组件重新渲染。
虽然可以省略选择器，但请抵制这种冲动，因为省略它会在任何表单状态更改时导致许多不必要的重新渲染。
form.Subscribe 组件最适合您需要在组件 UI 中对某些内容做出反应的情况。 例如，根据表单字段的值显示或隐藏 ui。
<form.Subscribe
selector={(state) => state.values.firstName}
children={(firstName) => (
<form.Field>
{(field) => (
<input
name="lastName"
value={field.state.lastName}
onChange={field.handleChange}
/>
)}
</form.Field>
)}
/>
<form.Subscribe
selector={(state) => state.values.firstName}
children={(firstName) => (
<form.Field>
{(field) => (
<input
name="lastName"
value={field.state.lastName}
onChange={field.handleChange}
/>
)}
</form.Field>
)}
/>
form.Subscribe 组件不会触发组件级别的重新渲染。 每当订阅的值发生更改时，只有 form.Subscribe 组件会重新渲染。
是否使用 useStore 或 form.Subscribe 之间的选择主要归结为，如果它在 ui 中渲染，请使用 form.Subscribe 以获得其优化优势，如果您需要在逻辑中获得响应性，那么 useStore 是最佳选择。
您每周的 JavaScript 新闻。 每周一免费发送给超过 100,000 名开发人员。