首页 技术 正文
技术 2022年11月11日
0 收藏 607 点赞 3,285 浏览 2057 个字

表单控件:

input

文档在介绍控件之前,先提到了react组件自身的一个特点:状态由state掌控,改变组件状态只能用setState方法。

而在html的表单里,input、radio、checkbox、select的值都是随用户输入改变的。

要创建一个React的表单控件,也就是用React的方式创建表单组件:

<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>

在input控件中,value值就是一个状态state.value。当用户输入完成后,通过onChange事件调用setState改变state.value的值,从而让state.value与用户输入一致。此时,input不再是一个单纯的表单元素,而是一个React组件,可以有各种用户自定义行为。这和vue的v-model倒是很一致。一个组件就是一个实例,状态变量属于实例的(私有)属性,并能单向/双向绑定。

textarea:

在html中,textarea的初始值由其文本元素定义。

在React中,用其value特性来表示。具体操作和input一样:

  <textarea value={this.state.value} onChange={this.handleChange} />

select:

 <select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>

在html中,select创建下拉菜单,在option中庸selected特性预选一个option。

在React中,不适用selected特性,而是直接用value预定义某个选项的值。这使得对select的操作专注在value特性。

   //...
constructor(props) {
super(props);
this.state = {value: 'coconut'}; this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
//...
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>

因此,对于input、textarea和select,我们只需要操作value即可。

处理Multiple Inputs:

文档给了一个针对多个表单控件的例程,我们可以通过判断控件的的name和type特性来处理:

   handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name; this.setState({
[name]: value
});
}

此时,表单的状态就是表单的名值对,经过URI编码后可以post给后台。

另一种替代方案:

  文档提到,如果我们嫌表单控件麻烦,可以用另一种形式的表单组件–Uncontrolled Components:

意思是我们不必特意给form中的表单元素写处理程序,也不需要创建state变量。我们只需要写一个针对整个表单的处理程序,在用户submit的时候调用即可。其中,表单元素的value的输入用一个ref函数捕获:

   render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);

另外,Uncontrolled Components形式的表单中,为了给表单元素设置初始值,有一个defaultValue特性,在表单渲染的时候显示初始值。

         <input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,999
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,511
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,357
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,140
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848