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. 关于Spring配置的一些东西

    Spring 配置的三种方式:JAVA配置,注解配置,和XML的配置 注解配置: @Service:标识服务层(业务层)组件 @Component:基本注解, 标识了一个受 Spring 管理的组件( ...

  2. 【C#】override,Abstract,Virtual 介绍及区别--转载

    要扩展或修改继承的方法.属性.索引器或事件的抽象实现或虚实现,必须使用 override 修饰符. 1. override 方法提供从基类继承的成员的新实现.通过 override 声明重写的方法称为 ...

  3. sql返回行id

    1.sql语句中 insert into tableName() output inserted.id values() 2 .存储过程中 ALTER PROCEDURE dbo.getBuyMedi ...

  4. Oracle中的层次查询详解

    1 语法格式 select [level], column, expr... from table [where condition] start with condition connect by ...

  5. a标签发送邮件

    <a href="Mailto:292808135@qq.com?CC=292808135@qq.com&Subject=反馈&Body=花式求喷~%0A您的不满就是我 ...

  6. 什么是Java序列化?为什么序列化?序列化有哪些方式?

    先普及一下,计算机中无法识别一个基本单元[字节]来表示,必须经过“翻译”才能让计算机理解人类的语言,这个翻译过程就是[编码],通常所说的字符转换为字节.  有I/O的地方机就会涉及编码,现在几乎所有的 ...

  7. django2.1---上下文处理器

    上下文处理器 上下文处理器是可以返回一些数据,在全局模板中都可以使用.比如登录后的用户信息,在很多页面中都需要使用,那么我们可以放在上下文处理器中,就没有必要在每个视图函数中都返回这个对象. 在set ...

  8. GDI+中发生一般性错误的解决办法(转)

    今天在开发.net引用程序中,需要System.Drawing.Image.Save 创建图片,debug的时候程序一切正常,可是发布到IIS后缺提示出现"GDI+中发生一般性错误" ...

  9. [转]Pass a ViewBag instance to a HiddenFor field in Razor

    本文转自:https://stackoverflow.com/questions/27456983/pass-a-viewbag-instance-to-a-hiddenfor-field-in-ra ...

  10. dev中ASPxListBox单选和多选的设置

    只需要设置SelectionMode,为Multiple时是单选,CheckColumn时是多选