How does antd get the value and label value of a select at the same time

How does antd get the value and label value of a select at the same time

Just set an attribute on select.

Just set labelInValue to true.

The label of the selected item will be packaged in value and passed to the  onChange other function, at this time value is an object.

Of course, using getFieldsValue will also be obtained at the same time.

Of course, if it is set in getFieldDecorator, you need to set the relevant value in initialValue, such as

<FormItem {...formItemLayout} label="Item category">
  {
    getFieldDecorator('categoryId', {
      initialValue: {key:""},
      rules: [{
        required: true, message:'This item is required',
      }]
    })(
      <Select labelInValue disabled={t.props.editAble} style={{width: 120, marginTop: 5}} size={config.size}>
        <Select.Option value="">All</Select.Option>
        <Select.Option value="cat1">Category 1</Select.Option>
        <Select.Option value="cat2">Category 2</Select.Option>
        <Select.Option value="cat3">Category 3</Select.Option>
        <Select.Option value="cat4">Category 4</Select.Option>
      </Select>
    )
  }
</FormItem>

You only need to pay attention to the initialValue piece, and the other content is the same as the normal writing code, otherwise, it will keep reporting errors.

Reference: https://cloud.tencent.com/developer/article/1148190 antd How to get the value and label value of a select at the same time-Cloud + Community-Tencent Cloud