React入门系列 - 5. 表单与变量的关联

5. 表单与变量的关联

在了解表单的时候，咱们须要了解一个概念受控组件和非受控组件。

受控组件就是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)}/>
复制代码

原文:www.yodfz.com/detail/38/5…