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…


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构

数据结构

殷人昆 / 2012-10 / 43.00元

《清华大学计算机系列教材:数据结构(C语言描述)》共分10章,第1章是介绍数据结构的地位和主要知识点,数据结构和算法的基本概念和算法分析的简单方法,以及C语言编程的要点,第2章~第10章对应考试大纲的6个知识单元,包括线性表、栈、队列和数组、树与二叉树、图、查找、排序,并做了适当延伸。作者在讨论每一个知识单元时,结合30多年教学的经验和考试辅导的体会,合理安排了教材内容,力求透彻、全面。对学生读书......一起来看看 《数据结构》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具