技術標籤：JSjs

需求
AntD選擇器Select模糊搜尋，最多選5個，最長字元6個，多餘省略號顯示，選擇超過1個第二個+n顯示。
程式碼

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';

const { Option } = Select;

const children = [];
for (let i = 10; i < 36; i++) {
  children.
 
push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <>
    <Select
      mode="multiple"
      allowClear
      style={{ width: '100%' }}
      placeholder="Please select"
 

      defaultValue={['a10', 'c12']}
      onChange={handleChange}
      maxTagCount={1} // 最多顯示一個
      maxTagTextLength={6} // 最長字元6個
    >
      {children}
    </Select>
  </>,
  document.getElementById('container'),
);

最多選5個
todo，在專案裡試一下先

https://segmentfault.com/q/1010000007948867
的方法

function handleChange
 
(value) {
  console.log(`selected ${value}`);
  debugger
  if(value.length > 4) {
    this.setState({value: value.slice(0,5)});
  } else {
    this.setState({value: value});
  }
}

實現