javascript - OnChange 事件上的 Antd 表单 setFieldValue 不起作用

Question

我有一个简单的表单字段，当使用 setFieldsValue 触发 onChange 事件时，我尝试格式化并设置字段值，但该方法不起作用。

我正在尝试在同一文本字段中显示格式化值。

请在此处找到沙盒链接 codeSandbox

我不想再创建一个具有状态的受控组件并设置值，因为原始表单数据中有 20 个字段。我们如何在 onChange 本身上设置表单值。

Answer 1

您正在丢失正在设置的值，因为 Antd 表单的 onChange 是异步的，并且在您编写的 onChange 之后运行。要解决这个问题，您只需将 setTimeout 添加到 setFieldsValue 即可:

onChange={e => {
  const value = e.target.value;
  const { setFieldsValue, getFieldValue } = this.props.form;
  setTimeout(() => {
    setFieldsValue({
      drivers: `+1 - ${value}`
    });
  }, 0);
}}

更实用的方法是使用 getFieldDecorator 的 normalize 函数:

{getFieldDecorator(`drivers`, {
   initialValue: "",
   normalize: (value) => {
     return `+1 ${value}`;
   }
})}

但是，这会在每次更改时添加 +1，这看起来不像您想要做的。所以或者:

normalize: (value) => {
  if(!value.startsWith('+1')) {
    return `+1 ${value}`;
  } 
  return value;
}

Codesandbox