antd Select 多选限制只选中三个

最新推荐文章于 2024-02-05 16:28:54 发布

*陳先森*

最新推荐文章于 2024-02-05 16:28:54 发布

阅读量2.1k

点赞数 1

文章标签： javascript reactjs

本文链接：https://blog.csdn.net/chen_c_/article/details/124237693

版权

本文档探讨了如何使用Ant Design的Select组件实现多选模式，并限制用户只能选择三个选项。通过设置`value`属性来处理初始反显及变更时的值更新。在`SelectChange`方法中检查选择数量，当超过限制时给出警告。问题在于如何正确处理反显和限制选择数量的逻辑。

摘要由CSDN通过智能技术生成

antd Select 多选限制只选中三个
支持默认反显

zclxbq:['..', '..', '..']// 最开始用于反显的数组

                                          <Select
                                         className='basic'
                                         placeholder='请选择'
                                         allowClear
                                         mode='multiple'
                                         onDropdownVisibleChange={open => {
                                           this.setState({ isChoiceCp: open })
                                           console.log(open)
                                         }}
                                         style={{ width: 380 }}
                                         //  defaultValue={this.state.zclxbq}
                                         value={this.state.zclxbq}
                                         onChange={(value, option) => { this.SelectChange(value, option) }}
                                       >
                                         {
                                           this.state.bqList.map(item => {
                                             return (
                                               <Select.Option key={item.sticherId} value={item.sticher}>{item.sticher}</Select.Option>
                                             )
                                           })
                                         }
                                       </Select>

其中，限制选择三个，写在SelectChange方法中

    // 获取到选择的设备类型
    SelectChange = async(value, option) => {
      if (option) {
        if (value.length > 3) {
          message.destroy()
          message.warn('最多选择3个标签')
          return
        }
        console.log('选择的', value, value.join(','))
        this.setState({zclxbq: value})  // 更新value
        await this.setState({lxbq: value.join(';')})
      }
    }