React 从入门到进阶之路(六)
之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 、双向数据绑定。接下来我们将介绍 React 表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容。
import React, {Component} from 'react'; class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
sex: "1",
city: "",
cities: ["北京", "上海", "南京"],
hobbies: [{
title: "抽烟", checked: true
}, {
title: "喝酒", checked: false
}, {
title: "烫头", checked: false
}],
info: "",
} } // 获取所有数据
getAllData = (event) => {
event.preventDefault();
console.log(this.state)
} // 名字
changeName = (event) => {
this.setState({
name: event.target.value
})
} // 性别
changeSex = (event) => {
this.setState({
sex: event.target.value
})
} // 地址
changeCity = (event) => {
this.setState({
city: event.target.value
})
} // 爱好
changeHobbies = (key) => {
let hobbies = this.state.hobbies;
hobbies[key].checked = !hobbies[key].checked;
this.setState({
hobbies: hobbies
})
} // 简介
changeInfo = (event) => {
this.setState({
info: event.target.value
})
} render() {
return (
<div>
<p>Hello {this.state.name}</p>
<form action="" onSubmit={this.getAllData}> 用户名:
<input value={this.state.name} onChange={this.changeName} type="text"/> <br/><br/> 性别:
男<input value="1" checked={this.state.sex === "1"} onChange={this.changeSex} type="radio"/>
女<input value="2" checked={this.state.sex === "2"} onChange={this.changeSex} type="radio"/> <br/><br/> 地址:
<select value={this.state.city} onChange={this.changeCity}>
{this.state.cities.map((val, key) => {
return <option key={key}>{val}</option>
})}
</select> <br/><br/> 爱好:
{this.state.hobbies.map((val, key) => {
return (
<span key={key}>
{val.title}
<input checked={val.checked} onChange={this.changeHobbies.bind(this, key)} type="checkbox"/>
</span>
)
})} <br/><br/> 简介:
<textarea value={this.info} onChange={this.changeInfo}></textarea>
<br/><br/> <input value="提交" type="submit"/>
</form> </div>
);
}
} export default Home;
之前我们已经介绍过了表单在 React 的一些基本信息,上面的代码比较详细的介绍了一下不同表单获取信息的方式。
下面是不同表单的不同处理方式:
1、text:
用 value 绑定 this.state 中的数据,然后通过 onChange 事件获取 changeName 方法,在 event 事件中获取 input 的值并赋值给 this.state
2、radio:
性别只能选择一个,所以 this.state.sex 默认值为 1 ,表示男,value 值分别绑定为 1 和 2,通过 checked 属性来判断哪个被选中,通过 onChange 事件将默认的 value 值赋值给 this.state.sex,checked 属性就能来判断被选中的值了。
3、select:
select 跟正常的 HTML 有所不同,它的 value 值绑定在 select 上,然后通过 onChange 事件获取选中的值,并将该值赋值给另一个变量来存储所选的值。
4、checkbox:
checkbox 为一个数组,可以选择多个值,在 this.state 的每个值中再添加一个属性 checked,选中为 true,没选中为 false,当点击某一个时,将所选中的值通过 onChange 事件传给 changeHobbies,然后通过该值找到 this.state 列表中的位置,将 checked 属性值去反即可来控制选中和取消选中。
5、textarea:
textarea 和 text 的获取值方法是一样的,通过 value 绑定 this.state 中的值,通过 onChange 事件来获取 textarea 框内的值并赋给 this.state。
这样就实现了 form 表单中的值的双向数据绑定,可以通过在 form 上添加 onSubmit 事件,取消默认触发事件来获取 form 表单内的值。
最后运行结果为:
React 从入门到进阶之路(六)的更多相关文章
- React 从入门到进阶之路(四)
之前的文章我们介绍了 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...
- React 从入门到进阶之路(三)
之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据. 上一篇中我们 ...
- React 从入门到进阶之路(五)
之前的文章我们介绍了 React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...
- React 从入门到进阶之路(七)
之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容.接下来我们将介绍 Rea ...
- React 从入门到进阶之路(八)
之前的文章我们介绍了 React中的组件.父子组件.React props父组件给子组件传值.子组件给父组件传值.父组件中通过refs获取子组件属性和方法.接下来我们将介绍 React propTyp ...
- React 从入门到进阶之路(九)
之前的文章我们介绍了 React propTypes defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...
- React 从入门到进阶之路(二)
在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件.JSX 语法.绑定数据和绑定对象. 之前我们已经将项目运行了起来,我们再来看一下目录结构: ...
- React 从入门到进阶之路(一)
在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...
- Python 爬虫从入门到进阶之路(六)
在之前的文章中我们介绍了一下 opener 应用中的 ProxyHandler 处理器(代理设置),本篇文章我们再来看一下 opener 中的 Cookie 的使用. Cookie 是指某些网站服务器 ...
随机推荐
- SecureCRT 7.0 如何自动记录日志
设置步骤如下: 1.打开SecureCRT ,在菜单里选择“选项”-->“全局选项” 2.然后选择“常规”--> “默认会话”--> “编辑默认设置” 3.然后选择“日志 ...
- mysql 中alter语句中change跟modify的区别
mysql 中alter语句中change和modify的区别可以使用CHANGE old_col_name column_definition子句对列进行重命名.重命名时,需给定旧的和新的列名称和列 ...
- python super()(转载)
一.问题的发现与提出 在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如代码段1: 代码段1: class A: def __init__(sel ...
- C# 打开指定的目录 记住路径中 / 与 \ 的使用方法
老生常谈的问题了,C#在指定目录时,路径中要使用 \\.直接看实例 using System; namespace OpenFile{ class OpenFile{ static void Main ...
- 怎么实现单击span时给span添加边框
说明: 1.开发环境 vs2012 asp.net mvc4 c# 1.效果图 2.html 前端代码 <%@ Page Language="C#" AutoEventWir ...
- esri和ArcGIS
1 esri esri是environment system research institute,环境系统研究所.总部在美国加州.它是世界上最大的GIS技术提供商. 主要产品有ArcGIS.ArcV ...
- React深入源码--了解Redux用法之Provider
在Redux中最核心的自然是组件,以及组件相关的事件与数据流方式.但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据,而是采用Provider统一处理,省去了 ...
- python数据分析之ipython
在用python进行数据分析的时候,需要提前安装如下几个库: Numpy:是python进行科学计算的科学包 pandas:提供了能够快速便捷地处理结构化数据的大量数据结构和函数 matplotlib ...
- Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file...
Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file: 把tomcat中的日志删除, ...
- ABAP内存运用
(1)ABAP 内存运用语句: EXPORT LT_ITAB TO MEMORY ID ‘MM’. IMOIRT LT_ITTAB FROM MEMORY ID ‘MM’. (2)SAP内 ...