antd Select 多选 限制只选中三个

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(';')})
      }
    }

其中的问题就是，刚开始反显用的是defaultValue来处理，发现行不通。后来尝试直接赋值，用value来处理，同时满足反显以及当选中三个之后，限制其不再选择。