响应性

Tanstack Form 在与表单交互时不会引起重新渲染。因此，您可能会发现尝试使用表单或字段状态值但失败了。

如果您想访问响应式值，您需要使用以下两种方法之一订阅它们：useStore 或 form.Subscribe 组件。

这些订阅的一些用途包括渲染最新的字段值、根据条件确定要渲染的内容，或在组件逻辑中使用字段值。

对于您想要“响应”触发器的情况，请查看监听器 API。

useStore

当您需要在组件逻辑中访问表单值时，useStore hook 是最理想的选择。useStore 接受两个参数。第一个是表单 store。第二个是用于精细调整您希望订阅的表单部分的 selector。

tsx

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)

您可以在 selector 中访问表单状态的任何部分。

请注意，当订阅的值发生变化时，useStore 会导致整个组件重新渲染。

虽然可以省略 selector，但请克制住冲动，因为省略它会导致任何表单状态更改时都会出现许多不必要的重新渲染。

form.Subscribe

form.Subscribe 组件最适合于您需要在组件 UI 中响应某些内容的情况。例如，根据表单字段的值显示或隐藏 UI。

tsx

<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 是您的选择。

useStore

form.Subscribe

订阅 Bytes

订阅 Bytes