ant-design/components/input/demo/presuffix.md

63 lines
1.1 KiB
Markdown
Raw Normal View History

---
order: 8
title:
zh-CN: 前缀和后缀
en-US: prefix and suffix
---
## zh-CN
在输入框上添加前缀或后缀图标。
## en-US
Add prefix or suffix icons inside input.
````jsx
import { Input, Icon } from 'antd';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: '',
};
}
emitEmpty = () => {
this.userNameInput.focus();
this.setState({ userName: '' });
}
onChangeUserName = (e) => {
this.setState({ userName: e.target.value });
}
render() {
const { userName } = this.state;
const suffix = userName ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
return (
<Input
placeholder="Enter your userName"
prefix={<Icon type="user" />}
suffix={suffix}
value={userName}
onChange={this.onChangeUserName}
ref={node => this.userNameInput = node}
/>
);
}
}
ReactDOM.render(<App />, mountNode);
````
````css
.anticon-close-circle {
cursor: pointer;
color: #ccc;
transition: color 0.3s;
2017-01-09 14:24:08 +08:00
font-size: 12px;
}
.anticon-close-circle:hover {
color: #999;
}
````