import React from 'react'; import { MehOutlined, SmileOutlined } from '@ant-design/icons'; import { Select, Space } from 'antd'; const smileIcon = <SmileOutlined />; const mehIcon = <MehOutlined />; const handleChange = (value: string | string[]) => { console.log(`selected ${value}`); }; const App: React.FC = () => ( <Space wrap> <Select prefix="User" defaultValue="lucy" style={{ width: 200 }} onChange={handleChange} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, { value: 'disabled', label: 'Disabled', disabled: true }, ]} /> <Select suffixIcon={smileIcon} defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, { value: 'disabled', label: 'Disabled', disabled: true }, ]} /> <Select suffixIcon={mehIcon} defaultValue="lucy" style={{ width: 120 }} disabled options={[{ value: 'lucy', label: 'Lucy' }]} /> <br /> <Select prefix="User" defaultValue={['lucy']} mode="multiple" style={{ width: 200 }} onChange={handleChange} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, { value: 'disabled', label: 'Disabled', disabled: true }, ]} /> <Select suffixIcon={smileIcon} defaultValue={['lucy']} mode="multiple" style={{ width: 120 }} onChange={handleChange} options={[ { value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }, { value: 'Yiminghe', label: 'yiminghe' }, { value: 'disabled', label: 'Disabled', disabled: true }, ]} /> <Select suffixIcon={mehIcon} defaultValue={['lucy']} mode="multiple" style={{ width: 120 }} disabled options={[{ value: 'lucy', label: 'Lucy' }]} /> </Space> ); export default App;