内容简介:在了解表单的时候,我们需要了解一个概念全部都需要通过
在了解表单的时候,我们需要了解一个概念 受控组件
和 非受控组件
。
受控组件
就是React可以控制这个组件内部所有的东西,比如设置控件的 value
,可以监听到这个组件改变事件 onChange
。但是,有些Html控件无法让React控制,典型的就是 input type=file
控件,他的value是只读的,React无论如何控制,都无法重置value值,而且对于 非受控组件
,我们无法对他进行数据判断处理。
全部都需要通过 refs
来获取,并且直接操作这个DOM的原生方法与属性。
5.1 通过input获取并且显示值
我们来看看,如何为input指定 state
的值。
5.1.1 直接修改
<input onInput={(e)=>{ this.setState({x:e.value}) }} /> 复制代码
我们直接通为控件指定了一个箭头方法进行修改state值,但是这样的修改方式,在一个表单中会显的比较累赘。我们可以通过一个小的代理方式进行修改。
5.1.2 代理修改
handleUpdateState (event) { let id = event.target.id; let idArrays = id.split('.'); let obj = this.state; let NowObj = obj; for (var i = 0; i < idArrays.length; i++) { if (i < idArrays.length - 1) { if (!NowObj[idArrays[i]]) { NowObj[idArrays[i]] = {}; } NowObj = NowObj[idArrays[i]]; } else { NowObj[idArrays[i]] = event.target.value; } } this.setState(obj); } <input id="name" onInput={this.handleUpdateState.bind(this)} /> 复制代码
方法很简单,通过读取空间上的id,按照id的命名空间将值写入所属节点中。 而这样我们就可以通过一个方法修改所有的值,并且可以在id上指定修改的层级。
5.2 通过check获取并且显示值
state = { checked:false } handleCheckBox () { this.setStat({checked:!this.state.checked}) } <input type="checkbox" checked = {this.state.checked} onChange={this.handleCheckBox.bind(this)}/> 复制代码
一般来说,我们使用checkbox的场景是在多选环境下,如果项目中需要进行多选功能,那么你需要提前做一个数组来保存多选值。这样checkbox是在受控情况下渲染的。
state = { items:[ {name:'checkbox1',checked:false}, {name:'checkbox2',checked:false}, {name:'checkbox3',checked:false} ] } handleCheckBox () { this.setStat({checked:!this.state.checked}) } this.state.items.map(p=> <input type="checkbox" checked = {this.state.checked} onChange={this.handleCheckBox.bind(this)}/>) 复制代码
5.3 通过radio获取并且显示值
radio就比较简单了,可以设置一个值,直接由radio出现改变的时候改变这个值
state = { checked:-1 } handleCheckBox (val) { this.setStat({checked:val}) } <input type="radio" checked = {this.state.checked==='1'} onChange={this.handleCheckBox.bind(this,1)}/> <input type="radio" checked = {this.state.checked==='2'} onChange={this.handleCheckBox.bind(this,2)}/> <input type="radio" checked = {this.state.checked==='3'} onChange={this.handleCheckBox.bind(this,3)}/> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 表单 – 避免Symfony强制显示表单字段
- 细说 Angular 2+ 的表单(二):响应式表单
- 8款最新CSS3表单 环形表单很酷
- 动态表单 form-create 2.5 版本来啦,帮你轻松搞定表单
- 开源 | vue-form-making:基于 Vue 的表单设计器,让表单开发简单而高效
- 表单验证(AngularJs)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。