Select选择器

    • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。

    • 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

    基本使用。

    Select选择器 - 图2

    多选

    多选，从已有条目中选择。

    3. const { Option } = Select;
    5. const children = [];
    6. for (let i = 10; i < 36; i++) {
    7.   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    8. }
    10. function handleChange(value) {
    11.   console.log(`selected ${value}`);
    12. }
    14. ReactDOM.render(
    15.   <Select
    16.     mode="multiple"
    17.     style={{ width: '100%' }}
    18.     placeholder="Please select"
    19.     defaultValue={['a10', 'c12']}
    20.     onChange={handleChange}
    21.   >
    22.     {children}
    23.   </Select>,
    24.   mountNode,
    25. );

    使用 optionLabelProp 指定回填到选择框的 Option 属性。

    1. import { Select } from 'antd';
    3. const { Option } = Select;
    5. function handleChange(value) {
    6.   console.log(`selected ${value}`);
    7. }
    9. ReactDOM.render(
    10.   <Select
    11.     mode="multiple"
    12.     style={{ width: '100%' }}
    13.     placeholder="select one country"
    14.     defaultValue={['china']}
    15.     onChange={handleChange}
    16.     optionLabelProp="label"
    17.   >
    18.     <Option value="china" label="China">
    19.       <span role="img" aria-label="China">
    20.         🇨🇳{' '}
    21.       </span>
    22.       China (中国)
    23.     </Option>
    24.     <Option value="usa" label="USA">
    25.       <span role="img" aria-label="USA">
    26.         🇺🇸{' '}
    27.       </span>
    28.       USA (美国)
    29.     </Option>
    30.     <Option value="japan" label="Japan">
    31.       <span role="img" aria-label="USA">
    32.         🇯🇵{' '}
    33.       </span>
    34.       Japan (日本)
    35.     </Option>
    36.     <Option value="koean" label="Koean">
    37.       <span role="img" aria-label="USA">
    38.         🇰🇷{' '}
    39.       </span>
    40.       Koean (韩国)
    41.     </Option>
    42.   </Select>,
    43.   mountNode,
    44. );

    Select选择器 - 图4

    分组

    用 OptGroup 进行选项分组。

    1. import { Select } from 'antd';
    3. const { Option, OptGroup } = Select;
    5. function handleChange(value) {
    6.   console.log(`selected ${value}`);
    7. }
    9. ReactDOM.render(
    10.   <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
    11.     <OptGroup label="Manager">
    12.       <Option value="jack">Jack</Option>
    13.       <Option value="lucy">Lucy</Option>
    14.     </OptGroup>
    15.     <OptGroup label="Engineer">
    16.       <Option value="Yiminghe">yiminghe</Option>
    17.     </OptGroup>
    18.   </Select>,
    19.   mountNode,
    20. );

    搜索和远程数据结合。

    1. import { Select } from 'antd';
    2. import jsonp from 'fetch-jsonp';
    3. import querystring from 'querystring';
    5. const { Option } = Select;
    7. let timeout;
    8. let currentValue;
    10. function fetch(value, callback) {
    11.   if (timeout) {
    12.     clearTimeout(timeout);
    13.     timeout = null;
    14.   }
    15.   currentValue = value;
    17.   function fake() {
    18.     const str = querystring.encode({
    19.       code: 'utf-8',
    20.       q: value,
    21.     });
    22.     jsonp(`https://suggest.taobao.com/sug?${str}`)
    23.       .then(response => response.json())
    24.       .then(d => {
    25.         if (currentValue === value) {
    26.           const { result } = d;
    27.           const data = [];
    28.           result.forEach(r => {
    29.             data.push({
    30.               value: r[0],
    31.               text: r[0],
    32.             });
    33.           });
    34.           callback(data);
    35.         }
    36.       });
    37.   }
    39.   timeout = setTimeout(fake, 300);
    40. }
    42. class SearchInput extends React.Component {
    43.   state = {
    44.     data: [],
    45.     value: undefined,
    46.   };
    48.   handleSearch = value => {
    49.     fetch(value, data => this.setState({ data }));
    50.   };
    52.   handleChange = value => {
    53.     this.setState({ value });
    54.   };
    56.   render() {
    57.     const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
    58.     return (
    59.       <Select
    60.         showSearch
    61.         value={this.state.value}
    62.         placeholder={this.props.placeholder}
    63.         style={this.props.style}
    64.         defaultActiveFirstOption={false}
    65.         filterOption={false}
    66.         onSearch={this.handleSearch}
    67.         onChange={this.handleChange}
    68.         notFoundContent={null}
    69.       >
    70.         {options}
    71.       </Select>
    72.     );
    73.   }
    74. }
    76. ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);

    Select选择器 - 图6

    试下复制 到输入框里。只在 tags 和 multiple 模式下可用。

    扩展菜单

    使用 dropdownRender 对下拉菜单进行自由扩展。

    1. import { Select, Icon, Divider } from 'antd';
    3. const { Option } = Select;
    5. ReactDOM.render(
    6.   <Select
    7.     defaultValue="lucy"
    8.     style={{ width: 120 }}
    9.     dropdownRender={menu => (
    10.       <div>
    11.         {menu}
    12.         <Divider style={{ margin: '4px 0' }} />
    13.         <div style={{ padding: '8px', cursor: 'pointer' }}>
    14.           <Icon type="plus" /> Add item
    15.         </div>
    16.       </div>
    17.     )}
    18.   >
    19.     <Option value="jack">Jack</Option>
    20.     <Option value="lucy">Lucy</Option>
    21.   </Select>,
    22.   mountNode,
    23. );

    Select选择器 - 图8

    展开后可对选项进行搜索。

    1. import { Select } from 'antd';
    3. const { Option } = Select;
    5. function onChange(value) {
    6.   console.log(`selected ${value}`);
    7. }
    9. function onBlur() {
    10.   console.log('blur');
    11. }
    13. function onFocus() {
    14.   console.log('focus');
    15. }
    17. function onSearch(val) {
    18.   console.log('search:', val);
    19. }
    21. ReactDOM.render(
    22.   <Select
    23.     showSearch
    24.     style={{ width: 200 }}
    25.     placeholder="Select a person"
    26.     optionFilterProp="children"
    27.     onChange={onChange}
    28.     onFocus={onFocus}
    29.     onBlur={onBlur}
    30.     onSearch={onSearch}
    31.     filterOption={(input, option) =>
    32.       option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    33.     }
    34.   >
    35.     <Option value="jack">Jack</Option>
    36.     <Option value="lucy">Lucy</Option>
    37.     <Option value="tom">Tom</Option>
    38.   </Select>,
    39.   mountNode,
    40. );

    三种大小

    三种大小的选择框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。

    1. import { Select, Radio } from 'antd';
    3. const { Option } = Select;
    5. const children = [];
    6. for (let i = 10; i < 36; i++) {
    7.   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    8. }
    10. function handleChange(value) {
    11.   console.log(`Selected: ${value}`);
    12. }
    14. class SelectSizesDemo extends React.Component {
    15.   state = {
    16.     size: 'default',
    17.   };
    19.   handleSizeChange = e => {
    20.     this.setState({ size: e.target.value });
    21.   };
    23.   render() {
    24.     const { size } = this.state;
    25.     return (
    26.       <div>
    27.         <Radio.Group value={size} onChange={this.handleSizeChange}>
    28.           <Radio.Button value="large">Large</Radio.Button>
    29.           <Radio.Button value="default">Default</Radio.Button>
    30.           <Radio.Button value="small">Small</Radio.Button>
    31.         </Radio.Group>
    32.         <br />
    33.         <br />
    34.         <Select size={size} defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
    35.           {children}
    36.         </Select>
    37.         <br />
    38.         <Select
    39.           mode="multiple"
    40.           size={size}
    41.           placeholder="Please select"
    42.           defaultValue={['a10', 'c12']}
    43.           onChange={handleChange}
    44.           style={{ width: '100%' }}
    45.         >
    46.           {children}
    47.         </Select>
    48.         <br />
    49.         <Select
    50.           mode="tags"
    51.           size={size}
    52.           placeholder="Please select"
    53.           defaultValue={['a10', 'c12']}
    54.           onChange={handleChange}
    55.           style={{ width: '100%' }}
    56.         >
    57.           {children}
    58.         </Select>
    59.       </div>
    60.     );
    61.   }
    62. }
    64. ReactDOM.render(<SelectSizesDemo />, mountNode);
    1. .code-box-demo .ant-select {
    2.   margin: 0 8px 10px 0;
    3. }
    5. #components-select-demo-search-box .code-box-demo .ant-select {
    6.   margin: 0;
    7. }

    Select选择器 - 图10

    联动

    省市联动是典型的例子。

    推荐使用 组件。

    1. import { Select } from 'antd';
    3. const { Option } = Select;
    4. const provinceData = ['Zhejiang', 'Jiangsu'];
    5. const cityData = {
    6.   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    7.   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
    8. };
    10. class App extends React.Component {
    11.   state = {
    12.     cities: cityData[provinceData[0]],
    13.     secondCity: cityData[provinceData[0]][0],
    14.   };
    16.   handleProvinceChange = value => {
    17.       cities: cityData[value],
    18.       secondCity: cityData[value][0],
    19.     });
    20.   };
    22.   onSecondCityChange = value => {
    23.     this.setState({
    24.       secondCity: value,
    25.     });
    26.   };
    29.     const { cities } = this.state;
    30.     return (
    31.       <div>
    32.         <Select
    33.           defaultValue={provinceData[0]}
    34.           style={{ width: 120 }}
    35.           onChange={this.handleProvinceChange}
    36.         >
    37.           {provinceData.map(province => (
    38.             <Option key={province}>{province}</Option>
    39.           ))}
    40.         </Select>
    41.         <Select
    42.           style={{ width: 120 }}
    43.           value={this.state.secondCity}
    44.           onChange={this.onSecondCityChange}
    45.         >
    46.           {cities.map(city => (
    47.             <Option key={city}>{city}</Option>
    48.           ))}
    49.         </Select>
    50.       </div>
    51.     );
    52.   }
    53. }
    55. ReactDOM.render(<App />, mountNode);

    Select选择器 - 图12

    获得选项的文本

    默认情况下 onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性。

    选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。

    1. import { Select } from 'antd';
    3. const { Option } = Select;
    5. function handleChange(value) {
    6.   console.log(value); // { key: "lucy", label: "Lucy (101)" }
    7. }
    9. ReactDOM.render(
    10.   <Select
    11.     labelInValue
    12.     defaultValue={{ key: 'lucy' }}
    13.     style={{ width: 120 }}
    14.     onChange={handleChange}
    15.   >
    16.     <Option value="jack">Jack (100)</Option>
    17.     <Option value="lucy">Lucy (101)</Option>
    18.   </Select>,
    19.   mountNode,
    20. );

    一个带有远程搜索，防抖控制，请求时序控制，加载状态的多选示例。

    1. import { Select, Spin } from 'antd';
    2. import debounce from 'lodash/debounce';
    4. const { Option } = Select;
    6. class UserRemoteSelect extends React.Component {
    7.   constructor(props) {
    8.     super(props);
    9.     this.lastFetchId = 0;
    10.     this.fetchUser = debounce(this.fetchUser, 800);
    11.   }
    13.   state = {
    14.     data: [],
    15.     value: [],
    16.     fetching: false,
    17.   };
    19.   fetchUser = value => {
    20.     console.log('fetching user', value);
    21.     this.lastFetchId += 1;
    22.     const fetchId = this.lastFetchId;
    23.     this.setState({ data: [], fetching: true });
    24.     fetch('https://randomuser.me/api/?results=5')
    25.       .then(response => response.json())
    26.       .then(body => {
    27.         if (fetchId !== this.lastFetchId) {
    28.           // for fetch callback order
    29.           return;
    30.         }
    31.         const data = body.results.map(user => ({
    32.           text: `${user.name.first} ${user.name.last}`,
    33.           value: user.login.username,
    34.         }));
    35.         this.setState({ data, fetching: false });
    36.       });
    37.   };
    39.   handleChange = value => {
    40.     this.setState({
    41.       value,
    42.       data: [],
    43.       fetching: false,
    44.     });
    45.   };
    47.   render() {
    48.     const { fetching, data, value } = this.state;
    49.     return (
    50.       <Select
    51.         mode="multiple"
    52.         labelInValue
    53.         value={value}
    54.         placeholder="Select users"
    55.         notFoundContent={fetching ? <Spin size="small" /> : null}
    56.         filterOption={false}
    57.         onSearch={this.fetchUser}
    58.         onChange={this.handleChange}
    59.         style={{ width: '100%' }}
    60.       >
    61.         {data.map(d => (
    62.           <Option key={d.value}>{d.text}</Option>
    63.         ))}
    64.       </Select>
    65.     );
    66.   }
    67. }
    69. ReactDOM.render(<UserRemoteSelect />, mountNode);

    Select选择器 - 图14

    隐藏已选择选项

    隐藏下拉列表中已选择的选项。

    1. import { Select } from 'antd';
    3. const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
    5. class SelectWithHiddenSelectedOptions extends React.Component {
    6.   state = {
    7.     selectedItems: [],
    8.   };
    10.   handleChange = selectedItems => {
    11.     this.setState({ selectedItems });
    12.   };
    14.   render() {
    15.     const { selectedItems } = this.state;
    16.     const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
    17.     return (
    18.       <Select
    19.         mode="multiple"
    20.         placeholder="Inserted are removed"
    21.         value={selectedItems}
    22.         onChange={this.handleChange}
    23.         style={{ width: '100%' }}
    24.       >
    25.         {filteredOptions.map(item => (
    26.           <Select.Option key={item} value={item}>
    27.             {item}
    28.           </Select.Option>
    29.         ))}
    30.       </Select>
    31.     );
    32.   }
    33. }