Ant Design 常見用法與坑點總結（二）：Form 表單下拉框設置初始值詳情 - 前端,javascript,antd-mobile,antd,select 麒寧博客

前言

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 增加了限制，導致其不生效。