antd-select下拉框同时获取所选值id和名字属性

1、预期实现

  • 需要得到id和name的值
    然后传入接口
    在这里插入图片描述
    在这里插入图片描述
    2、给当前的选择框绑定回调事件
  • 一般我们需要获取一个值得时候是这样写
  changeGoodsName = (value) => {
    this.setState({
      goodsId: value
    })
  }
  • 而现在需要两个值
  changeGoodsName = (value, e) => {
    this.setState({
      goodsId: value,
      goodsName: e.props.children
    })
  }

3、亦可参照此篇方法
选择器取值

`antd`(Ant Design)是一个流行的React UI框架,它提供了大量的预制组件来帮助开发者快速构建美观、一致的用户界面。`Select`组件是`antd`中的一个下拉选择组件,它允许用户从一组选项中选择一个或多个值。 要修改`Select`组件的样式,你可以通过以下几个步骤进行: 1. **使用自定义类名**: 为`Select`组件指定一个`className`属性,这样你就可以通过CSS直接修改这个组件的样式。 ```jsx <Select className="custom-select" /> ``` 2. **覆盖默认样式**: 通过CSS选择器定位到`Select`组件,并使用CSS规则来覆盖默认样式。 ```css .custom-select { width: 200px; } .custom-select .ant-select-selector { /* 修改选择器的样式 */ height: 40px; line-height: 40px; background-color: #fff; border: 1px solid #d9d9d9; } .custom-select .ant-select-selection { /* 修改选中项的样式 */ color: #1890ff; } ``` 3. **使用Less变量**: 如果你使用的是`antd`的Less版本,可以通过覆盖内置的Less变量来改变样式。在项目中创建一个`.less`文件,并配置相应的Less变量。 ```less @select_height: 40px; @select_item_height: 40px; @select_item_selected_color: #1890ff; ``` 4. **使用内联样式**: 直接在JSX中使用内联样式属性来修改样式。 ```jsx <Select style={{ width: '200px' }} className="custom-select" placeholder="Select a person" optionFilterProp="children" filterOption={(input, option) => option.props.children .toLowerCase() .includes(input.toLowerCase()) } /> ``` 5. **使用`@ant-design/compatible`**: 如果你希望兼容`antd`旧版本的样式,可以使用`@ant-design/compatible`包,并在其中进行样式覆盖。 ```jsx <Compatible component={Select} className="custom-select" style={{ width: '200px' }} // 其他属性 > {/* 子组件 */} </Compatible> ``` 通过上述方法,你可以根据需要自定义`antd`的`Select`组件样式。但请记住,修改样式时要确保遵循CSS的优先级规则,以确保你自定义的样式能够正确应用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值