antd 如何同时获取一个select 的value和 label值

杭州前端工程师

发布于 2018-06-15 11:57:19

6.3K0

发布于 2018-06-15 11:57:19

文章被收录于专栏：前端大白专栏前端大白专栏

只需要在select上设置一个属性即可.

labelInValue 设置为true 就可以.

选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。

当然,用getFieldsValue 也同样会被同时获取到.

当然了,如果是在getFieldDecorator 中设置的话 ,需要在initialValue中设置好相关的值才行,比如

<FormItem {...formItemLayout} label="项目类别">
  {
    getFieldDecorator('categoryId', {
      initialValue: {key:""},
      rules: [{
        required: true, message: '此项为必选',
      }]
    })(
      <Select labelInValue  disabled={t.props.editAble} style={{width: 120, marginTop: 5}} size={config.size}>
        <Select.Option value="">全部</Select.Option>
        <Select.Option value="cat1">类别1</Select.Option>
        <Select.Option value="cat2">类别2</Select.Option>
        <Select.Option value="cat3">类别3</Select.Option>
        <Select.Option value="cat4">类别4</Select.Option>
      </Select>
    )
  }
</FormItem>

只需要关注initialValue那一块便可以,其它的和正常书写代码内容是一样的,不然的话,会一直报错

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

label