Select选择器

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

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

    基本使用。

    Select 选择器 - 图2

    多选

    多选，从已有条目中选择（scroll the menu）

    3. const Option = Select.Option;
    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. );

    tags select，随意输入的内容（scroll the menu）

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    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 mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange}>
    16.     {children}
    17.   </Select>,
    18.   mountNode,
    19. );

    Select 选择器 - 图4

    联动

    省市联动是典型的例子。

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    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.     this.setState({
    18.       cities: cityData[value],
    19.       secondCity: cityData[value][0],
    20.     });
    21.   };
    23.   onSecondCityChange = value => {
    24.     this.setState({
    25.       secondCity: value,
    26.     });
    27.   };
    29.   render() {
    30.     const { cities } = this.state;
    31.     return (
    32.       <div>
    33.         <Select
    34.           defaultValue={provinceData[0]}
    35.           style={{ width: 120 }}
    36.           onChange={this.handleProvinceChange}
    37.         >
    38.           {provinceData.map(province => (
    39.             <Option key={province}>{province}</Option>
    40.           ))}
    41.         </Select>
    42.         <Select
    43.           style={{ width: 120 }}
    44.           value={this.state.secondCity}
    45.           onChange={this.onSecondCityChange}
    46.         >
    47.           {cities.map(city => (
    48.             <Option key={city}>{city}</Option>
    49.           ))}
    50.         </Select>
    51.       </div>
    52.     );
    53.   }
    54. }
    56. ReactDOM.render(<App />, mountNode);

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

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    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. );

    Select 选择器 - 图6

    搜索用户

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

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

    1. import { Select } from 'antd';
    4. class SelectWithHiddenSelectedOptions extends React.Component {
    5.   state = {
    6.     selectedItems: [],
    7.   };
    9.   handleChange = selectedItems => {
    10.     this.setState({ selectedItems });
    11.   };
    13.   render() {
    14.     const { selectedItems } = this.state;
    16.     return (
    17.       <Select
    18.         mode="multiple"
    19.         placeholder="Inserted are removed"
    20.         value={selectedItems}
    21.         onChange={this.handleChange}
    22.         style={{ width: '100%' }}
    23.       >
    24.         {filteredOptions.map(item => (
    25.           <Select.Option key={item} value={item}>
    26.             {item}
    27.           </Select.Option>
    28.         ))}
    29.       </Select>
    30.     );
    31.   }
    32. }
    34. ReactDOM.render(<SelectWithHiddenSelectedOptions />, mountNode);

    Select 选择器 - 图8

    带搜索框

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    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.Option;
    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. }
    63. 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

    用 OptGroup 进行选项分组。

    搜索框

    搜索和远程数据结合。

    1. import { Select } from 'antd';
    3. import querystring from 'querystring';
    5. const Option = Select.Option;
    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.result;
    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.         showArrow={false}
    66.         filterOption={false}
    67.         onSearch={this.handleSearch}
    68.         onChange={this.handleChange}
    69.         notFoundContent={null}
    70.       >
    71.         {options}
    72.       </Select>
    73.     );
    74.   }
    75. }
    77. ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);

    Select 选择器 - 图12

    试下复制 露西,杰克 到输入框里。只在 tags 和 multiple 模式下可用。

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    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 mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
    16.     {children}
    17.   </Select>,
    18.   mountNode,
    19. );

    扩展菜单

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

    1. import { Select, Icon, Divider } from 'antd';
    3. const Option = Select.Option;
    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. );
    1. <select>
    2. </select>