在mantine-form输入上使用自定义onChange事件

Question

我想做一些响应逻辑，在这个逻辑中，当一个值发生变化时，它会触发其他值在一个表单中进行更改。

我正在使用mantine表单，到目前为止，我能够找到的最佳方法如下：

const onUserChange = (e) => {
   // form.values.acounts.user contains the previous user value
   // e contains the incoming update to it
   form.setFieldValue('other.property.associated.with.user', e);
 }

 <Select label="User"
              data={users}
              {...form.getInputProps(`accounts.user`)}
              onChange={(e) => {
                onUserChange(e);
                form.getInputProps(`accounts.user`).onChange(e)
              }}
      ></Select>

这种方法看起来不错，但我不确定是否有更好的方法。以前有人见过这个吗？也许是一些整洁的回调语法什么的？

Answer 1

事实证明，库在onchange方面并没有什么神奇之处，而只是通过form.setFieldValue有效地设置了表单值。只要所提供的onchange设置值，就不需要重新引用从'getInputProps‘获得的onchange

Answer 2

似乎是重写库onChange处理程序的合法方法。但是，我也会使用onChangeUser来设置用户的值：

const onUserChange = ({ target }) => {
  const { value } = target;
  form.setFieldValue('other.property.associated.with.user', fn(value)); // fn transforms the value for the associated property
  form.setFieldValue('accounts.user', value);
};

<Select label="User"
  data={users}
  {...form.getInputProps('accounts.user')}
  onChange={onUserChange}
></Select>

Answer 3

我也遇到过类似的情况。在我的情况下，我必须提供搜索建议使用。为此，我必须在每次更改上设置debouncedState。

在您的情况下，我建议在调用onChange(e)之前添加一个额外的if语句。

<Select label="User"
          data={users}
          {...form.getInputProps(`accounts.user`)}
          onChange={(e) => {
            onUserChange(e);
            if(form.getInputProps(`accounts.user`).onChange)
              form.getInputProps(`accounts.user`).onChange(e)
          }}
  ></Select>