前言

Ant Design 是蚂蚁出品的杰出优良的 React 组件库，置信应用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的治理端系统也都是应用 Ant Design 的组件库。

因而，理解 Ant Design 的常见用法与坑点还是有必要的。

本系列文章针对 Ant Design 一些官网文档虽有提及，然而容易被疏忽的，又比拟重要常见的用法进行总结。同时对工作应用过程当中遇到的坑点进行演绎。

tip：文章应用的 4.x 版本的 Ant Design。

上一篇：Ant Design 常见用法与坑点总结（一）：Form 表单验证

Form 表单 Select 下拉框设置初始值

在开发工作中，须要为 Form 表单中的 Select 下拉框设置初始值的状况也不足为奇。上面介绍两种常见的解决形式。

形式一：应用 setFieldsValue() 办法

该办法通过利用 Form 表单实例提供的 setFieldsValue() 办法设置初始值，在页面首次展现即可调用该办法设置初始值。

const showModal = () => {  form.setFieldsValue({    color: "red",    ...  });  ...}
<Form.Item  name="color"  label="车辆表面色彩"  rules={[{ required: true, message: '请抉择车辆表面色彩' }]}>  <Select    placeholder="请抉择车辆表面色彩"    {...props}  >    <Option key={1} value="red">红色</Option>    <Option key={2} value="yellow">黄色</Option>    <Option key={3} value="blue">蓝色</Option>  </Select></Form.Item>

形式二：应用 Form 表单的 initialValues 属性

通过应用 Form 表单的 initialValues 属性，也可能为表单域设置初始值。

const initialValues = { color: "yellow" };<Form form={form} initialValues={initialValues}>  <Form.Item    name="color"    label="车辆表面色彩"    rules={[{ required: true, message: '请抉择车辆表面色彩' }]}  >      <Select        placeholder="请抉择车辆表面色彩"        {...props}      >        <Option key={1} value="red">红色</Option>        <Option key={2} value="yellow">黄色</Option>        <Option key={3} value="blue">蓝色</Option>      </Select>  </Form.Item></Form>

形式三：应用 Form.Item 的 initialValue 属性

通过应用 Form.Item 的 initialValue 属性，独自为该表单项设置初始值，不影响其余表单项。

<Form.Item  name="color"  label="车辆表面色彩"  rules={[{ required: true, message: '请抉择车辆表面色彩' }]}  initialValue="blue">  <Select    placeholder="请抉择车辆表面色彩"    {...props}  >    <Option key={1} value="red">红色</Option>    <Option key={2} value="yellow">黄色</Option>    <Option key={3} value="blue">蓝色</Option>  </Select></Form.Item>

谬误形式：应用 Select 下拉框的 defaultValue 属性

过后遇到这个问题时，我第一个想法是利用 Select 下拉框的 defaultValue 属性，来设置默认值，如下代码：

<Form.Item  name="color"  label="车辆表面色彩">  <Select defaultValue="red">    <Option key={1} value="red">红色</Option>    <Option key={2} value="yellow">黄色</Option>    <Option key={3} value="blue">蓝色</Option>  </Select></Form.Item>

然而该办法并不失效，这是因为 Form.Item 设置了 name 属性，Ant Design 减少了限度，导致其不失效。

设置了 name 属性的 Form.Item 包裹的表单控件，不能用控件的 value 或 defaultValue 来设置表单域的值，默认值能够用 Form 的 initialValues 来设置。

官网文档相干阐明

相干链接：Form 表单