--- order: 3 title: zh-CN: 输入框组合 en-US: Input Group --- ## zh-CN 输入框的组合展现。 注意:使用 `compact` 模式时,不需要通过 `Col` 来控制宽度。 ## en-US Input.Group example Note: You don't need `Col` to control the width in the `compact` mode. ```jsx import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd'; const InputGroup = Input.Group; const { Option } = Select; const options = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', children: [ { value: 'xihu', label: 'West Lake', }, ], }, ], }, { value: 'jiangsu', label: 'Jiangsu', children: [ { value: 'nanjing', label: 'Nanjing', children: [ { value: 'zhonghuamen', label: 'Zhong Hua Men', }, ], }, ], }, ]; class CompactDemo extends React.Component { state = { dataSource: [], }; handleChange = value => { this.setState({ dataSource: !value || value.indexOf('@') >= 0 ? [] : [`${value}@gmail.com`, `${value}@163.com`, `${value}@qq.com`], }); }; render() { return (








); } } ReactDOM.render(, mountNode); ``` ```css .site-input-group-wrapper .site-input-split { background-color: #fff; } ```