antd select label 和下拉label不一致实现

青旅半醒 2022-03-18 07:16 604阅读 0赞

### antd select label 和下拉label不一致实现 ###

*   *  正常的形式
     *  要实现这种效果呢？
     *  代码如下

## 正常的形式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]

## 要实现这种效果呢？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]

## 代码如下 ##

[codepen链接][codepen]

const {  Select } = antd;
    
    const Option = Select.Option;
    
    const children = [];
    for (let i = 10; i < 36; i++) { 
      children.push(<Option key={ i.toString(36) + i}>             { i.toString(36) + i}
        <span className="select-inner-ignore">---this is details</span></Option>);
    }
    
    function handleChange(value) { 
      console.log(`selected ${ value}`);
    }
    
    ReactDOM.render(
      <Select
        mode="tags"
        style={ {  width: '20%' }}
        onChange={ handleChange}
        tokenSeparators={ [',']}
      >
        { children}
      </Select>,
      mountNode
    );

.ant-select .select-inner-ignore { 
      display: none;
    }

thanks

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220318/37703279b2304df3aa619b9b94d927c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]: /images/20220318/7e65ad7dedca41e9b9dfd6efb888b881.png
[codepen]: https://codepen.io/wwr1234567/pen/aXMzPb