之前的文章我们介绍了 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 从入门到进阶之路(六)的更多相关文章

  1. React 从入门到进阶之路(四)

    之前的文章我们介绍了  React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...

  2. React 从入门到进阶之路(三)

    之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据. 上一篇中我们 ...

  3. React 从入门到进阶之路(五)

    之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...

  4. React 从入门到进阶之路(七)

    之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容.接下来我们将介绍 Rea ...

  5. React 从入门到进阶之路(八)

    之前的文章我们介绍了 React中的组件.父子组件.React props父组件给子组件传值.子组件给父组件传值.父组件中通过refs获取子组件属性和方法.接下来我们将介绍 React propTyp ...

  6. React 从入门到进阶之路(九)

    之前的文章我们介绍了 React propTypes  defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...

  7. React 从入门到进阶之路(二)

    在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件.JSX 语法.绑定数据和绑定对象. 之前我们已经将项目运行了起来,我们再来看一下目录结构: ...

  8. React 从入门到进阶之路(一)

    在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...

  9. Python 爬虫从入门到进阶之路(六)

    在之前的文章中我们介绍了一下 opener 应用中的 ProxyHandler 处理器(代理设置),本篇文章我们再来看一下 opener 中的 Cookie 的使用. Cookie 是指某些网站服务器 ...

随机推荐

  1. java 最长回文字串

      package string.string1_6; public class LongestPalidrome { /** * 使用常规方法, 以字符串的每一个字符作为中心进行判断, 包括奇数和偶 ...

  2. Linux dnsmasq 服务

    在日常开发中,有这么一个需求: 大家在公司内网同一个网段下,一般情况上网会由网关(一般是路由器)的DHCP服务分配IP.公司内网里放了几台服务器,分别配置成静态IP,这些IP是DHCP配置时预留的.服 ...

  3. openh264 在 osx 上的 nasm 问题

    先在 pc 上编译,熟悉一下. 编译遇到一个问题: nasm -DUNIX64 -DPREFIX -f macho64 -I./codec/common/x86/ -o codec/common/x8 ...

  4. Linux 中权限的再讨论( 下 )

    前言 上篇随笔讲述了Linux中权限的大致实现机制以及目录权限的相关规则.本文将讲解Linux中的三种特殊权限:SUID,SGID,Sticky权限.看完这两篇文章,你一定会对Linux的权限有个更深 ...

  5. ffmpeg下载rtmp flv

    ffmpeg -i rtmp://shanghai.chinatax.gov.cn:1935/fmsApp/16a0148f117.flv -c copy dump.flv

  6. Operation not permitted - /usr/bin/pod

    问题描述:执行sudo gem install cocoapods, 提示出错:While executing gem ... (Errno::EPERM)     Operation not per ...

  7. The Little Match Girl,摘自iOS应用Snow White and more stories

    Many years ago on a cold and snowy New Year's Eve, a poor little girl was wandering arround on the s ...

  8. Delphi的RTTI(许多参考链接)

    RTTI(RunTime Type Information): 运行时类型信息, 就是在程序运行后也能得到类型(譬如 TButton 类)的信息. 这在早期主要用于 IDE 设计时, 譬如把一个 Bu ...

  9. 代码空间项目 -- cookie的基本使用

    cookie在日常开发b/s架构时候经常使用,可以在记住用户,方便自动登录,也可以记住用户的偏好并对应推送广告 下面说说开发时候的基本用法: 1.创建cookie//设置cookie,键值对形式Coo ...

  10. java 传参方式--值传递还是引用传递

    java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用 ...