Ant Design Form：那些你可能忽略了但超实用的属性

哈哈_我又笑了
1,596 阅读3分钟

在 Ant Design 的 Form 组件中，我们常常会使用到一些基本的属性，如 name、rules 和 initialValue 等。然而，除了这些常见的属性之外，还有一些容易被我们忽视的高级属性，它们在提升开发效率和保证性能稳定方面发挥着重要作用。本文将重点介绍 getValueFromEvent、getValueProps 和 dependencies 这三个属性，并通过实例展示它们的实际应用。

getValueFromEvent 属性

getValueFromEvent 属性用于在表单值发生变化时，对输入值进行处理并赋值给当前表单域。它接收一个函数作为参数，该函数会在当前表单项的值发生变化时触发，并返回一个处理后的值，如表单提交前的数据处理、数据格式化、数据校验等等。

下面是一个简单的示例，展示了如何使用 getValueFromEvent 属性将输入值转换为大写：

<Form form={form}> 
  <Form.Item 
    name="name" 
    label="名字" 
    getValueFromEvent={(e) => { return e?.toUpperCase(); //转换成大写 }} > 
     <Input />
  </Form.Item> 
</Form>

在这个示例中，当用户在输入框中输入内容时，getValueFromEvent 函数会将输入的值转换为大写并赋值给当前表单项。这样，我们就可以在提交表单前对数据进行预处理，提高数据质量。

getValueProps 属性

getValueProps 属性用于获取表单项的值属性，通常用于自定义表单项的值处理逻辑。例如，当服务器端返回的数据格式与表单组件所需格式不一致时，我们可以使用 getValueProps 属性来处理这些数据。

下面是一个示例，展示了如何使用 getValueProps 属性将服务器返回的数据格式化为两位小数：

const [data, setData] = useState(null);
useEffect(() => { 
// 模拟从服务器获取数据 
  setTimeout(() => { setData({ price: 5 }); }, 1000); }, 
[]);
useEffect(() => { 
  if (data) { form.setFieldsValue(data);
 }}, [data, form]);
 
 <Form form={form}> 
   <Form.Item name="price" label="金额" getValueProps={(value) => { return { value: Number(value).toFixed(2) }; //换成两位小数展示 }} > 
     <Input /> 
   </Form.Item> 
 </Form>

在这个示例中，我们首先模拟从服务器获取数据，然后使用 getValueProps 属性将获取到的数据格式化为两位小数并展示在输入框中。这样，我们就可以轻松地处理不同格式的数据，提高开发效率。

dependencies 属性

dependencies 属性用于指定一组相关的表单项，当这些相关表单项中的任何一个发生变化时，都会触发指定表单项的校验或其他操作。这个属性通常用于两个表单项之间存在依赖关系的校验场景。

下面是一个示例，展示了如何使用 dependencies 属性实现两个表单项之间的依赖校验：

<Form form={form}> 
  <Form.Item name="name" label="选择"> 
     <Select> 
       <Select.Option value={1}>苹果</Select.Option>
       <Select.Option value={2}>橘子</Select.Option>
     </Select> 
  </Form.Item>
  <Form.Item
    name="fruit" 
    label="水果类别" 
    dependencies={['name']} rules={[ { required: true, },
        ({ getFieldValue }) => ({ //校验name是否有值 validator(_, value) { if (!getFieldValue('name')) { return Promise.resolve(); }
        return Promise.reject( new Error( 'The new password that you entered do not match!', ), ); }, })
        ]}>
        <Input />
   </Form.Item> 
 </Form>

在这个示例中，我们有两个表单项：一个 Select 组件（name）和一个 Input 组件（fruit）。我们使用 dependencies 属性指定 name 表单项作为 fruit 表单项的依赖项。当 name 表单项的值发生变化时，fruit 表单项的校验器函数会被触发。在这个校验器函数中，我们检查 name 表单项是否有值，如果没有值，则返回一个错误信息。

总之，Ant Design 的 Form 组件提供了许多高级属性，这些属性可以帮助我们在不同场景下实现更复杂的功能，提高开发效率并保证性能稳定。希望本文的介绍能帮助您更好地理解和应用这些属性。

avatar
文章
阅读
粉丝