如何在antd中获取FormItem更改时的字段值

在使用Ant Design（antd）库中的表单组件（如 Form 和 FormItem）时，我们经常需要获取表单项（FormItem）更改时的字段值以进行一些操作或验证。Ant Design 提供了多种方式来实现这一功能，以下是一些常见的方法：

1. 使用 onFieldsChange 和 onValuesChange 回调

Ant Design 的 Form 组件提供了 onFieldsChange 和 onValuesChange 两个钩子函数，它们可以用于捕获字段的变化。

onValuesChange

这个回调函数会在表单字段值发生变化时触发，参数中包含了所有表单的值。

jsx
import React from 'react';
import { Form, Input } from 'antd';

const Demo = () => {
  const handleValuesChange = (changedValues, allValues) => {
    console.log('Changed:', changedValues);
    console.log('All Values:', allValues);
  };

  return (
    <Form onValuesChange={handleValuesChange}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default Demo;

在上面的例子中，每当任何表单字段值发生变化时，handleValuesChange 函数都会被调用，它会打印出变化的字段值和所有字段的当前值。

onFieldsChange

这个回调函数会提供更详细的信息，包括字段的状态和名称。

jsx
import React from 'react';
import { Form, Input } from 'antd';

const Demo = () => {
  const handleFieldsChange = (changedFields, allFields) => {
    console.log('Changed Fields:', changedFields);
    console.log('All Fields:', allFields);
  };

  return (
    <Form onFieldsChange={handleFieldsChange}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default Demo;

在这个例子中，每当表单字段的任何属性（如值、触摸状态、验证状态）发生变化时，handleFieldsChange 函数将被调用。

2. 使用 Form.Item 的 getValueFromEvent

如果你只关心特定表单项的值变化，可以使用 Form.Item 的 getValueFromEvent 属性来处理这种情况。这个属性可以让你自定义处理表单控件的值：

jsx
import React from 'react';
import { Form, Input } from 'antd';

const CustomInput = ({ value, onChange }) => (
  <Input value={value} onChange={e => onChange(e.target.value.toUpperCase())} />
);

const Demo = () => {
  return (
    <Form>
      <Form.Item
        name="username"
        label="Username"
        getValueFromEvent={(event) => {
          // 可以在这里添加自定义逻辑
          return event.target.value.trim();
        }}
      >
        <CustomInput />
      </Form.Item>
    </Form>
  );
};

export default Demo;

上述代码中，我们通过 getValueFromEvent 对输入值进行了处理，例如去除字符串的前后空格。这样，无论何时表单项的值发生变化，我们都可以获取到处理后的值。

通过上述方法，你可以根据需要灵活地获取并处理 Ant Design 表单中的字段值变化。这对于创建动态的、响应用户输入的界面非常有帮助。