Input输入框
ie系列浏览器下使用模拟placeholder以及composition时间的处理
浏览器支持
IE 8+ |
Chrome 31.0+ |
Firefox 31.0+ |
Opera 30.0+ |
Safari 7.0+ |
安装
$ npm install @gem-mine/rc-input --save
代码演示
在线示例:https://gem-mine.github.io/rc-input/site/
基本使用
import Input from "@gem-mine/rc-input";
import '@gem-mine/rc-input/lib/style';
class App extends React.Component {
handleChange(e){
console.log(e.target.value)
}
handleClick(e){
console.log(e)
}
render() {
return <Input placeholder='用户名' defaultValue="默认值" onChange={this.handleChange} onClick={this.handleClick} />;
}
}
ReactDOM.render(<App />, mountNode);
受控输入框
import Input from "@gem-mine/rc-input";
import '@gem-mine/rc-input/lib/style';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: '',
};
}
onChangeUserName = (e) => {
this.setState({ userName: e.target.value });
}
render() {
const { userName } = this.state;
return (
<Input
value={userName}
onChange={this.onChangeUserName}
placeholder={'用户名'}
/>
);
}
}
ReactDOM.render(<App />, mountNode);
文本域输入
import Input from "@gem-mine/rc-input";
import '@gem-mine/rc-input/lib/style';
class App extends React.Component {
render() {
return <Input type='textarea' rows='4' placeholder='输入评论' />;
}
}
ReactDOM.render(<App />, mountNode);
密码框
import Input from "@gem-mine/rc-input";
import '@gem-mine/rc-input/lib/style';
class App extends React.Component {
render() {
return <Input placeholder='密码' type='password' />;
}
}
ReactDOM.render(<App />, mountNode);
受控输入框获取的值为异步获取
import Input from "@gem-mine/rc-input";
import '@gem-mine/rc-input/lib/style';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: '',
};
}
componentDidMount() {
this.setState({ userName: '异步值'});
}
onChangeUserName = (e) => {
this.setState({ userName: e.target.value });
}
render() {
const { userName } = this.state;
return (
<Input
value={userName}
onChange={this.onChangeUserName}
placeholder={'用户名'}
/>
);
}
}
ReactDOM.render(<App />, mountNode);
使用readOnly属性时,在ie下不回退页面
import Input from "@gem-mine/rc-input";
class App extends React.Component {
handleChange(e){
console.log(e.target.value)
}
handleClick(e){
console.log(e)
}
render() {
return <Input readOnly placeholder='用户名' defaultValue="默认值" onChange={this.handleChange} onClick={this.handleClick} />;
}
}
ReactDOM.render(<App />, mountNode);
API
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
onChange | 输入字符回调 | Function(event) | - | false |
type | 声明 input 类型,同原生 input 标签的 type 属性。另外提供 type="textarea" | string | text |
false |
style | 容器节点样式 | Object | - | false |
className | 输入框样式 | string | - | false |
prefixCls | 组件样式类名称前缀 | string | 'rc-input' | false |
value | 输入框内容 | string | - | false |
defaultValue | 输入框默认内容 | string | - | false |
placeholder | 同元素placeholder属性 | string | - | false |
本地运行
npm install
npm run start