ant.design select option獲取額外的屬性

select默認有value,和label兩個屬性,有時候需要選擇數據后帶出其他值

如圖

選擇公司后帶出公司數據

 

select的onchange事件第二個回調參數可以拿到所有定義在option上的值

代碼

  // 根據選擇公司進行回填
  const changeCompany = (val, option) => {
    console.log(option)
    form.setFieldsValue({
      ...option, 
      establishedTime: moment(option.establishedtime)
    })
  }

 return
<Form
            form={form}
            layout="vertical"
          >
            <Row justify="space-between">
              <Col span={7}>
                <Form.Item 
                  label="公司名稱" 
                  name="companyId"
                  rules={[{required: true, message: '請選擇公司名稱'}]}>
                  <Select
                    showSearch
                    style={{ width: 200 }}
                    placeholder="請選擇公司名稱"
                    onChange={changeCompany}
                    filterOption={(input, option) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {companyOptions.map(item => 
                      <Option 
                      key={item.id} 
                      value={item.id}
                      companyCode={item.companyCode} // 額外的屬性
                      establishedtime={item.establishedTime}
                      desc={item.desc}
                      >{item.companyName}</Option>
                    )}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item 
                  label="公司編號" 
                  name="companyCode"
                  rules={[{required: true, message: '請輸入公司編號'}]}>
                  <Input disabled placeholder="請輸入公司編號" />
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item 
                  label="公司成立時間" 
                  name="establishedTime"
                  rules={[{required: true, message: '請輸入公司成立時間'}]}>
                   <DatePicker style={{width: '100%'}} format={dateFormat} />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="公司描述" 
                  name="desc"
                  rules={[{required: true, message: '請輸入公司描述'}]}>
                  <TextArea
                    placeholder="請輸入公司描述"
                    autoSize={{ minRows: 2, maxRows: 6 }}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>