跟着官方示例学习 @tanStack-form --- Linked Fields

🌲系列一:跟着官方示例学习 @tanStack-form --- Simple

🌲系列二:跟着官方示例学习 @tanStack-form --- Array


这篇并没有采用官方的示例,代码部分也较为简单,因此直接在文章中展示,感兴趣的小伙伴可以粘贴至自己项目运行哦🤝

🌱 基础知识:什么是 linked fields?

在使用表单库时,我们经常会遇到这样的需求:某个字段的值变化后,另一个字段需要跟着联动更新或校验。所谓 linked fields,指的是 字段 A 的值变化后,影响字段 B 的行为,常见于:

  • 输入"密码"后,"确认密码"字段需要实时校验一致性
  • 选择国家后,联动显示对应城市选项

TanStack Form 提供了内建能力来实现这些需求,主要有两种方式:

  • validators.onChangeListenTo: 用于跨字段验证
  • <form.Subscribe />: 适合更灵活的值同步或控制禁用等 UI 行为

🧪 场景一:确认密码字段验证(密码一致性)

最常见的联动场景:两个字段必须值相同。

首先我们可以看官方文档中提到的例子:

tanstack.com/form/latest...

tsx 复制代码
function App() {
  const form = useForm({
    defaultValues: {
      password: '',
      confirm_password: '',
    },
    // ...
  })

  return (
    <div>
      <form.Field name="password">
        {(field) => (
          <label>
            <div>Password</div>
            <input
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          </label>
        )}
      </form.Field>
      <form.Field
        name="confirm_password"
        validators={{
          onChangeListenTo: ['password'],
          onChange: ({ value, fieldApi }) => {
            if (value !== fieldApi.form.getFieldValue('password')) {
              return 'Passwords do not match'
            }
            return undefined
          },
        }}
      >
        {(field) => (
          <div>
            <label>
              <div>Confirm Password</div>
              <input
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </label>
            {field.state.meta.errors.map((err) => (
              <div key={err}>{err}</div>
            ))}
          </div>
        )}
      </form.Field>
    </div>
  )
}

🔍 要点说明: onChangeListenTo: ['password'] 表示"监听 password 字段"

使用 fieldApi.form.getFieldValue('password') 获取 password 的当前值进行对比

📘 延伸阅读:getFieldValue API 🔗

🧪 场景二:选择国家 → 自动填写城市

除了验证类联动,setFieldValue 可以在字段变化时,主动设置另一个字段的值。

比如:当用户选择国家时,自动填写该国家的首都。

tsx 复制代码
<form>
  <div>
    <form.Field
      name="country"
      validators={{
        onChange: ({ value }) => {
          // 看这里 👈👈👈
          const options = citiesMap[value as "China" | "USA"] || "";
          form.setFieldValue("city", options);
        },
      }}
    >
      {(field) => (
        <label>
          <div>Select Country</div>
          <select onChange={(e) => field.handleChange(e.target.value)}>
            <option value="China">China</option>
            <option value="USA">USA</option>
          </select>
        </label>
      )}
    </form.Field>
  </div>
  <div>
    <form.Field name="city">
      {(field) => (
        <div>
          <label>
            <div>City</div>
            <input value={field.state.value} disabled />
          </label>
        </div>
      )}
    </form.Field>
  </div>
</form>;

📘 延伸阅读:setFieldValue API 🔗

🧪 场景三:选择国家 → 联动城市下拉框

这一场景稍微复杂一点,涉及到联动选项更新。推荐使用 <form.Subscribe /> 实现响应式更新。

tsx 复制代码
<form>
  <div>
    <form.Field name="country">
      {(field) => (
        <label>
          <div>Select Country</div>
          <select onChange={(e) => field.handleChange(e.target.value)}>
            <option value="China">China</option>
            <option value="USA">USA</option>
          </select>
        </label>
      )}
    </form.Field>
  </div>
  <div>
    <form.Subscribe selector={(state) => state.values.country}>
      {(country) => (
        <form.Field name="city">
          {(field) => {
            const options = citiesMap[country as "China" | "USA"] || [];
            return (
              <div>
                <label>
                  <div>City</div>
                  <select
                    value={field.state.value}
                    onChange={(e) => field.handleChange(e.target.value)}
                  >
                    {options.map((city: string) => (
                      <option key={city} value={city}>
                        {city}
                      </option>
                    ))}
                  </select>
                </label>
              </div>
            );
          }}
        </form.Field>
      )}
    </form.Subscribe>
  </div>
</form>;

🔍 要点说明:

  • form.Subscribe 可以监听任意字段的变化,并触发 UI 重新渲染

  • citiesMap[country] 实时更新城市下拉列表的选项

  • 城市字段仍通过 form.Field 管理状态,表单数据仍是联动的

相关推荐
灿灿121382 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴20 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack38 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
315356691341 分钟前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele2 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试