天天看點

解決antd中form表單包含Select下拉框預設值與下拉框中的值關聯問題

問題描述:在Form表單中,下拉框多選的情況下,如果點選的是編輯按鈕,會在表單中傳遞預設值,但是表單中的預設值和下拉框中的值沒有關聯,導緻再次選擇下拉框中的值還會再次選中

<Form.Item 
    name="color" 
    label="color" 
    rules={[{ required: true }]} 
    initialValue={['白色','灰色']}>
        <Select
          allowClear
          mode="multiple"
        >
          <Option value="white">白色</Option>
          <Option value="grey">灰色</Option>
          <Option value="black">黑色</Option>
          <Option value="blue">藍色</Option>
          <Option value="green">綠色</Option>
        </Select>
</Form.Item>
           

此時頁面上是這樣的效果:

解決antd中form表單包含Select下拉框預設值與下拉框中的值關聯問題

 還可以再次選擇已經存在的值

解決antd中form表單包含Select下拉框預設值與下拉框中的值關聯問題

 預設值和下拉框中的值關聯應該在表單預設值中傳遞Option中的value值:

<Form.Item 
    name="color" 
    label="color" 
    rules={[{ required: true }]} 
    initialValue={['white','grey']}>
        <Select
          allowClear
          mode="multiple"
        >
          <Option value="white">白色</Option>
          <Option value="grey">灰色</Option>
          <Option value="black">黑色</Option>
          <Option value="blue">藍色</Option>
          <Option value="green">綠色</Option>
        </Select>
</Form.Item>
           

此時頁面上展示的效果:

解決antd中form表單包含Select下拉框預設值與下拉框中的值關聯問題

表單中的預設值已經和下拉清單中的值關聯上,不會再次被選中! 

繼續閱讀