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. (转)CentOS7使用ACL精确控制文件和目录的访问权限

    原文:https://www.linuxidc.com/Linux/2018-01/150111.htm https://blog.csdn.net/maxiaoqiang1/article/deta ...

  2. Netty核心概念(9)之Future

    1.前言 第7节讲解JAVA的线程模型中就说到了Future,并解释了为什么可以主线程可以获得线程池任务的执行后结果,变成一种同步状态.秘密就在于Java将所有的runnable和callable任务 ...

  3. springclould nginx转发 websocket400报错问题

    之前一直找原因一直围绕着nginx转发的问题 说头信息没设置全 然后nginx配置文件上加了这些 #http块加以下几行: map $http_upgrade $connection_upgrade ...

  4. Android之Zxing二维码扫描图片拉伸

    还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多 ...

  5. 【.Net】水晶报表CrystalReport粗浅入门

    VB6代码大概是这样的: crystalreport1.Connect:='dsn=xxx;uid=yyy;pwd=zzz;dsq=aaa'; crystalreport1.DiscardSavedD ...

  6. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  7. 转载:哈希加密算法 MD5,SHA-1,SHA-2,SHA-256,SHA-512,SHA-3,RIPEMD-160 - aTool

    http://www.atool.org/hash.php 一.MD5哈希加密算法 MD5即Message-Digest Algorithm 5(信息-摘要算法 5),用于确保信息传输完整一致.是计算 ...

  8. webapi找到了与该请求匹配的多个操作

    关于这个问题是路由在找方法的时候层没有指定对,同一个链接,同样的参数导致路由找不到方法导致的报错,可以在WebApiConfig中多配置一层,比如"api/{controller}/{act ...

  9. VB/C#获取资源Rources

    VB.Net: My.Resources.ResourceManager.GetObject("data") C# Properties.Resources.文件名

  10. VMWare开启DHCP和NAT服务(VMWare无法通过NAT上网以及和host主机通信的问题解决)

    最近在学习Hadoop,开始做一个集群.由于各个节点的IP地址需要保持不变,我决定在VMWare采用NAT的模式联网. 但是在安装Ubuntu系统的时候,提示我DHCP服务未开启. Your netw ...