在Mantine Form中使用自定义onChange事件实现表单响应式逻辑

你当前的写法确实能实现需求，但有更简洁优雅的实现方式，下面推荐几种优化方案：

方案一：全局值变化监听（onValuesChange） #

Mantine Form 内置了onValuesChange配置项，可全局监听所有字段值的变化，把联动逻辑统一放在表单配置中，无需给单个组件绑定自定义onChange：

const form = useForm({
  initialValues: {
    accounts: { user: '' },
    other: { property: { associated: { with: { user: '' } } } }
  },
  onValuesChange: (values, prevValues) => {
    // 仅在accounts.user字段变化时触发联动
    if (values.accounts.user !== prevValues.accounts.user) {
      form.setFieldValue('other.property.associated.with.user', values.accounts.user);
    }
  }
});

// 组件直接使用getInputProps即可，无需额外处理
<Select label="User" data={users} {...form.getInputProps('accounts.user')} />

这种方式让组件代码更干净，适合多字段联动的场景。

方案二：简化组件内的onChange逻辑 #

如果只针对单个字段做联动，可以简化自定义onChange的写法，避免重复调用内置方法：

<Select 
  label="User"
  data={users}
  {...form.getInputProps('accounts.user', {
    onChange: (event) => {
      // 先调用表单内置逻辑更新字段值
      form.getInputProps('accounts.user').onChange(event);
      // 再执行联动更新
      form.setFieldValue('other.property.associated.with.user', event.target.value);
    }
  })}
/>

或者更直接的写法，直接调用form.onChange同时更新两个字段：

<Select 
  label="User"
  data={users}
  value={form.values.accounts.user}
  onChange={(value) => {
    form.onChange('accounts.user', value);
    form.onChange('other.property.associated.with.user', value);
  }}
/>

方案三：使用useEffect监听字段变化 #

通过useEffect监听目标字段的变化，值改变时自动更新关联字段，逻辑分离更清晰：

const form = useForm({
  initialValues: {
    accounts: { user: '' },
    other: { property: { associated: { with: { user: '' } } } }
  }
});

useEffect(() => {
  form.setFieldValue('other.property.associated.with.user', form.values.accounts.user);
}, [form.values.accounts.user]);

// 组件正常使用即可
<Select label="User" data={users} {...form.getInputProps('accounts.user')} />

以上三种方案各有适用场景：方案一适合全局多字段联动，方案二适合单个字段的简单联动，方案三适合需要额外异步逻辑或复杂处理的场景，你可以根据实际需求选择。

内容的提问来源于stack exchange，提问作者iamaword