--- order: 999 title: zh-CN: 4.0 Debug en-US: 4.0 Debug debug: true --- ## zh-CN 基本使用。 ## en-US Basic Usage. ```tsx import { Button, Input, Select } from 'antd'; import React from 'react'; const handleChange = (value: string | string[]) => { console.log(`selected ${value}`); }; const App: React.FC = () => ( <div style={{ width: 500, position: 'relative', zIndex: 1, border: '1px solid red', background: '#FFF', }} > <Input style={{ width: 100 }} value="222" /> <Select style={{ width: 120 }} onChange={handleChange} showSearch placeholder="233" options={[ { value: 'jack', label: 'Jack', }, { value: 'lucy', label: 'Lucy', }, { value: 'disabled', disabled: true, label: 'Disabled', }, { value: 'Yiminghe', label: 'yiminghe', }, { value: 'long', label: 'I am super super long!', }, ]} /> <Select mode="multiple" style={{ width: 120 }} defaultValue={['lucy']} onChange={handleChange} showSearch placeholder="233" options={[ { value: 'jack', label: 'Jack', }, { value: 'lucy', label: 'Lucy', }, { value: 'disabled', disabled: true, label: 'Disabled', }, { value: 'Yiminghe', label: 'yiminghe', }, { value: 'long', label: 'I am super super long!', }, ]} /> <span className="debug-align">AntDesign</span> <Button>222</Button> </div> ); export default App; ``` <style> #components-select-demo-debug .debug-align { position: relative; display: inline-block; line-height: 32px; height: 32px; background: rgba(255, 0, 0, 0.1); box-sizing: border-box; } #components-select-demo-debug .debug-align:after { position: absolute; content: ''; border: 1px solid green; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; } </style>