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. matplotlib基本使用(矩形图、饼图、热力图、3D图)

    使用matplotlib画简单的图形: #-*- coding:utf-8 -*- from numpy.random import randn import matplotlib.pyplot as ...

  2. 使用fiddler抓手机包遇到问题

    1,http://blog.csdn.net/roland_sun/article/details/30078353 2,参照上面不周,不能实现用自己ip:8888端口下载出证书 解决办法,先从fid ...

  3. C/C++ -- Gui编程 -- Qt库的使用 -- 对话框QDialog

    模态对话框 -----源文件main.cpp(工程QtDialog)----- #include "qtdialog.h" #include <QApplication> ...

  4. for循环的3个参数

    1.最常用的方法是用来遍历集合 /** **第一个参数:表示循环的初始值,或初始条件,这里是i=0; **第二个参数:是循环的条件,这里是当i小于list的长度时; **第三个参数:每次循环要改变的操 ...

  5. vue view 表单验证正常逻辑

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

  6. @RestController和@Controller注解的区别

    @RestController是@ResponseBody和@Controller注解的结合,当你return一个页面时,使用@Controller注解返回的是相应页面,使用@RestControll ...

  7. 开源方案搭建可离线的精美矢量切片地图服务-4.Mapbox样式设计

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...

  8. 快速安装.net 4.0

    1.打开运行输入 cmd 2.输入 cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3.输入 aspnet_regiis.exe -i

  9. 小白学习之Code First(三)

    上下文Context类中的base构造器的几个方法重置(1.无参 2.database name 3 . 连接字符串) 无参:如果基类base方法中无参,code first将会以 :{Namespa ...

  10. java存储图片

    import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.util. ...