何为受控组件与非受控组件?html
像input、textarea、select标签等在html中是能够进行用户输入改变内容的,而在react中即便一个原生组件。受控与非受控就从这几个组件中说明react
受控组件:从字面理解,就是组件受到了react的状态控制,数组
。因此要使用setState才能进行修改内容this
当input、textarea、select等中设置了value属性时,将变成受控组件,使用onChange事件进行触发。spa
进行筛选表单验证时很适合,确保提交时的数据正确,减小请求。code
<input type="text" value={this.state.text} onChange={this.change1.bind(this)}/>
<textarea name="" id="" cols="30" rows="10" value={this.state.text2} onChange={this.change2.bind(this)}></textarea>
此时更改内容将使用state与setStateorm
this.state={ text:"", text2:"", checkedIndex:0, }
change1(e){ this.setState({text:e.target.value}) }
关于input的type="radio"单选框时,可设置一个数组做为input属性htm
state设置当前选中第几个的下标blog
遍历时checked处作判断事件
触发事件时更改当前选中项便可
非受控组件:就是组件的状态不收到react控制,不用setState。通常会选择使用ref。若是须要value有默认值 则可以使用defaultValue属性
若是是一次提交,就很适合使用这种方式
<form action="" onSubmit={this.handle.bind(this)}> <input type="text" defaultValue="555" ref="text2"/> <input type="submit" value="submit"/> </form>
修改表单时不会更改状态,就最后提交submit时进行验证
handle(e){ console.log(this.refs.text2.value) e.preventDefault()//防止默认提交 }
固然,要使用提交前的表单验证也能够,就是onChange
<input type="text" ref="text" onChange={this.change.bind(this)}/>