handleInputChange = (event) => {
const target = event.target;
const type = target.type;
const value = String.prototype.trim.call(target.value);
const name = target.name;
if (type === 'checkbox') {
if (this.state.formData[name] === undefined) { // 创建
this.setState(() => ({
formData: Object.assign(this.state.formData, {
[name]: [value],
}),
}));
} else {
const valueIndex = this.state.formData[name].indexOf(value);
if (valueIndex < 0) { // 查找是否已经被勾选
this.setState((prevState) => ({
formData: Object.defineProperty(this.state.formData, [name], {
value: prevState.formData[name].concat([value]),
}),
}));
} else {
const arr = this.state.formData[name];
arr.splice(valueIndex, 1); // 去掉已经选择的
this.setState(() => ({
formData: Object.defineProperty(this.state.formData, [name], {
value: arr,
}),
}));
}
}
} else {
this.setState(() => ({
formData: Object.assign(this.state.formData, {
[name]: value,
}),
}));
}
}

ReactJS表单handleChange的更多相关文章

  1. 基于React和Node.JS的表单录入系统的设计与实现

    一.写在前面 这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景 人活着一定要有信仰,没有 ...

  2. Cleave.js – 自动格式化表单输入框的文本内容

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...

  3. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  4. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

  5. 群里分享的react的收藏一下!今日周末,改了个表单验证然后无所事事了!

    今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还 ...

  6. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  7. 6. React 表单使用介绍

            表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...

  8. vue中的表单

    v-model指令实现表单双向绑定数据.触发文本框的input事件.一.文本框 <div id="J_app"> <p>{{ info }}</p&g ...

  9. React文档(十)表单

    HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...

随机推荐

  1. 剑指offer二十六之二叉搜索树与双向链表

    一.题目 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二.思路 对二叉搜索树中序遍历的结果即为排序的结果,在中序遍历的过程中,建 ...

  2. Shell之expect的测试

    测试:./sshLogin.sh Slave1 caipeichao 1qaz@WSX hadoop lk198981 HadoopCluster #!/usr/bin/expect -f #auto ...

  3. javascript中的浅拷贝和深拷贝 分类: JavaScript 2015-05-07 15:29 831人阅读 评论(1) 收藏

    1.js对象浅拷贝 简单的赋值就是浅拷贝.因为对象和数组在赋值的时候都是引用传递.赋值的时候只是传递一个指针. 看下面的实例代码: var a = [1,2,3]; var b =a ; var te ...

  4. C/C++ -- Gui编程 -- Qt库的使用 -- 使用自定义类

    1.新建空Qt工程 2.新建C++类HelloQt 3.新建ui文件,添加部件,重命名主窗体(对话框)类名HelloQt,构建生成ui头文件 4.修改头文件helloqt.h #ifndef HELL ...

  5. RxJava/RxAndroid 使用实例实践

    原文地址 RxAndroid Tutorial响应式编程(Reactive programming)不是一种API,而是一种新的非常有用的范式,而RxJava就是一套基于此思想的框架,在Android ...

  6. 前端性能优化---缓存篇SDK

    1.把前端最常用的资源css.js存在本地1.1  前端缓存技术SessionStorage 优点:临时存储神器,关闭页面标签自动回收,不可以跨页面交互. 取值的时候有两种方法,一种是用session ...

  7. Ionic国际化解决方案

    1.     核心内容 使用Angular2的国际化(i18n)库:ngx-translate 官网地址:http://www.ngx-translate.com/ GitHub地址:https:// ...

  8. c#基础学习(0627)之类型转换、算数运算符++、--

    类型转换 我们要求等号两边参与运算的操作数的类型必须一致,如果不一致,满足下列条件会发生自动类型转换,或者称之为隐式类型转换 例如:int和double兼容(都是数字类型) 目标类型大于源类型 例如: ...

  9. 初识IntPtr

    一:什么是IntPtr 先来看看MSDN上说的:用于表示指针或句柄的平台特定类型.这个其实说出了这样两个事实,IntPtr 可以用来表示指针或句柄.它是一个平台特定类型.对于它的解释,这个哥们写的比较 ...

  10. SpringBoot访问NoSQL和简单的Thymeleaf-Spring-Spring-boot整合

    SpringBoot访问NoSQL SpringBoot访问Redis 在pom.xml添加boot-data-redis定义 <parent> <groupId>org.sp ...