react如何获取表单数据

2023-11-05

react如何获取表单数据?

分为两种情况:
	第一种是每次输入都会更新状态
	第二种是只有用到的时候才获取(会用大量的ref,不推荐)

这里主要介绍第一种

//这是我们要操作的数据
  state = {
    resume:{
      username: '',
      password:''
    }
  }
  //通过传参的方式
  setdata = (objname, key) => {
    console.log(window)
    return (e) => {
      console.log(window)
      console.log(objname, key, e)
      const data = this.state[objname]
      data[key] = e.target.value
      this.setState({ [objname]: data })
    }
  }

render(){
	return(
	<div>
	    账号:<input onChange={this.setdata('resume','username')} type="text" />
	    密码:<input onChange={this.setdata('resume','password')} type="password" />
	    <button onClick={this.send}>提交</button>
	</div>
	)
}

除了通过传参也可与利用标签的属性
<input customName="resume" name="username" onChange={this.setdata()} type="text" />
获取属性 e.target.name e.target.getAttribute('customName')
获取到属性之后和传参的操作也就一致了

遇到多选框就需要稍微的改变一下了

  setdata = (objname, key) => {
    
    return (e) => {
       const data = this.state[objname]
      if (e.target.type === "checkbox") {
        data[key]=e.target.checked
      } else {
        data[key] = e.target.value
      }
     this.setState({ [objname]: data })
    }
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react如何获取表单数据 的相关文章

  • renren-fast 快速开发 Web 管理平台

    什么是 renren fast renren fast 是一个 Java 的开源项目 只需要对它进行简单修改 就能够应用到自己的项目中 大大简化开发流程 缩短开发周期 renren fast 是一个前后端分离开发的项目 前端基于 vue e
  • 算法之动态规划理论

    目录 前言 一个模型三个特征理论讲解 1 最优子结构 2 无后效性 3 重复子问题 一个模型三个特征实例剖析 两种动态规划解题思路总结 1 状态转移表法 2 状态转移方程法 四种算法思想比较分析 总结 参考资料 前言 本篇博文主要讲解动态规

随机推荐

  • 一步一步详解LSTM网络【从RNN到LSTM到GRU等,直至attention】

    一步一步详解LSTM网络 从RNN到LSTM到GRU等 直至attention 0 前言 1 Recurrent Neural Networks循环神经网络 2 The Problem of Long Term Dependencies长期
  • 直接理解转置卷积(Transposed convolution)的各种情况

    使用GAN生成图像必不可少的层就是上采样 其中最常用的就是转置卷积 Transposed Convolution 如果把卷积操作转换为矩阵乘法的形式 转置卷积实际上就是将其中的矩阵进行转置 从而产生逆向的效果 所谓效果仅仅在于特征图的形状
  • Word模板引擎poi-tl

    文章目录 方案对比 版本 特性 模板 数据 输出 数据模型 标签 1 文本 2 图片 3 表格 4 列表 5 嵌套 6 区块对 SpingEL 2 单系列图标 3 多系列图标 4 组合图表 配置 1 标签前后缀 2 标签类型 3 标签匹配值
  • vlc源码编译android最新版2020年9月份记录

    经过几天研究终于在2020 9 25早上编译出安卓版本的vlc for android的so文件了 此时源码指定gradle是6 1 1版本的 主要参考都是百度上面的 你们也能百度到 这里就不引用了 重点 1 参考vlc官方编译过程 htt
  • 激光扫描测量点模拟(Matlab源码)

    本文提供了一个模拟环境 模拟激光束打到物体表面上的点及地面点 可以设置激光范围 分辨率 物体位置 大小及旋转 近期需要分析激光扫描仪在物体的背景上产生的遮挡 没找到合适的环境 自己用Matlab写了一个 原理不难 但细节的东西挺多 本以为一
  • 【达内课程】DataInputStream、DataOutputStream用法

    文章目录 简介 DataOutputStream DataInputStream 栗子1 写入数据 栗子2 读取 栗子3 保存学生信息 简介 在 io 包中 提供了两个与平台无关的数据操作流 数据输出流 DataOutputStream 数
  • C语言语法笔记

    C语言语法笔记 C 语言教程 网道 wangdoc com C 语言教程 菜鸟教程 runoob com 文章目录 C语言语法笔记 一 关键字 32 二 预编译指令 三 流程控制 3 1 顺序结构 3 2 循环结构 3 3 条件结构 四 变
  • OpenStack--镜像制作

    通过 KVM 安装虚 Centos 和 Windwos 2008 R2 x86 64 操作系统步骤并将磁盘文件作为镜像上传到 openstack glance 作为批量创建虚拟机的镜像文件 其中 windowsn 2008 安装 virti
  • 产品开发项目中文档的重要性

    现在 很多人认为写文档是一件苦差使 特别是研发人员 觉得写文档是一种浪费 和产品开发工作没有太大关系 更愿意把写文档的时间用来写代码画图纸 实际上 一个成功完整的产品开发项目 最终产出的不只是可交付的实际产品 还包括产品开发过程中的文档 以
  • Slim-neck by GSConv:自动驾驶车辆检测器架构的更好设计范式(文末附代码)

    Slim neck by GSConv 自动驾驶车辆检测器架构的更好设计范式 摘要 引言 相关工作 本文方法 GSConv的优势在于轻量级检测器 这些检测器通过添加DSC层和Shuffle来增加非线形表达能力 但是 如果GSConv在模型的
  • 用遗传算法求解TSP问题

    原文链接 http blog 5long me 2015 genetic algorithm on tsp 遗传算法简介 关于遗传算法 首先看一段维基百科的解释 遗传算法是模仿自然界生物进化机制发展起来的随机全局搜索和优化方法 它借鉴了达尔
  • elementUI的自定义主题

    elementUI的自定义主题的设置 一 安装elementUI以及sass loader node sass 项目中使用scss编写需要依赖的插件 npm i element ui S npm i sass loader D npm i
  • 数据分析笔记

    数据分析 1 不同数据格式读取 mysql数据操作 text文件操作 json文件操作 csv文件操作 excel文件操作 1 1 mysql 数据操作 pip intall pymysql import pymysql pymysql c
  • 毕业设计 - 基于单片机的放松按摩仪设计与实现 - 物联网 嵌入式 stm32

    文章目录 0 前言 1 简介 2 主要器件 3 实现效果 4 硬件设计 AB32VG1主控MCU NTC温度采集 adc7 PE5 其他器件引脚 5 软件说明 5 最后 0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设
  • QT学习——QFileSystemModel与QTreeView显示文件夹下的文件信息

    最近因为项目需求 使用QT做界面 新手学习 记录一些笔记 虽然QT已经做好了标准对话框的国际化 但是有时候对于中文的翻译可能达不到我们期望的 所以就需要我们自己来修改 比如下面的代码中 利用了国际化 写在main函数中 QApplicati
  • 常见查找算法

    1 常见查找概念 查找指根据给定的某个值 在查找表中确定一个其关键字等于给定值的数据元素 查找表是由同一类型的数据元素或记录构成的集合 关键字是数据元素中某个数据项的值 又称为键值 主关键字可以唯一地标识一个记录 次关键字可以标识多个数据元
  • linux中某个端口拒绝远程主机连接原因及解决方法

    linux中某个端口拒绝远程主机连接原因及解决方法 问题描述 比如在本机telent到 192 168 8 170 主机的9000 端口 被拒绝 zhu hadoop log telnet 192 168 8 170 9000 Trying
  • OpenCv之图像直方图

    目录 一 基本概念 二 使用OpenCv统计直方图 三 使用掩膜的直方图 一 基本概念 图像直方图是用一表示教字图像中亮度分布的直方图 标绘了图像中每个高度值的像素数 可以借助观察该有方图了解需要如何调整亮度分布的直方图 这种直方图中 横坐
  • QT中以get,post方式调用后台web api接口(.NET开发)

    在QTCreator中 包含头文件 include
  • react如何获取表单数据

    react如何获取表单数据 分为两种情况 第一种是每次输入都会更新状态 第二种是只有用到的时候才获取 会用大量的ref 不推荐 这里主要介绍第一种 这是我们要操作的数据 state resume username password 通过传参