表单组件像 <input>、<textarea> 不同于其它的原生组件,因为它们会随着用户交互而改变。这些组件提供了接口方便我们管理这些交互。
交互属性
表单组件提供了一些受用户交互影响的属性
- value,支持<input>、<textarea>
- checked,支持<input> type类型是checkbox或者radio
- selected,支持<option>
在HTML中,<textarea> 的值是通过子属性设置的。在React中,需要通过value设置。我们可以通过添加事件属性onChange监听内容的变化,onChange会在下列情况下被触发:
- input或者textarea的内容改变
- input的checked状态改变
- select的状态改变
受控组件
设定了value的input就是一个受控组件。input里会一直展现这个值
var InputDemo = React.createClass({ render: function () { return ( <input type="text" value="Hello!"/> ); } }); React.render( <InputDemo />,document.body );
渲染完成后,input里会一直显示Hello!,用户的任何输入都是无效的。如果你想随着用户的输入改变,使用onChange事件
var InputDemo = React.createClass({ getInitialState: function () { return {value: 'Hello!'} },render: function () { return ( <input type="text" onChange={this.handleChange} value={this.state.value}/> ); },handleChange: function (event) { this.setState({value: event.target.value}); } }); React.render( <InputDemo />,document.body );
不受控组件
value没有值或者值设为null的input是一个不受控组件。用户的任何输入都会反映到输入框中
var InputDemo = React.createClass({ render: function () { return ( <input type="text" value={null}/> ); } }); React.render( <InputDemo />,document.body );
这个时候也可以监听onChange事件,内容的改变也会触发事件。
可以通过defaultValue给input设置默认值
var InputDemo = React.createClass({ render: function () { return ( <input type="text" defaultValue="xxx"/> ); } }); React.render( <InputDemo />,document.body );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。