react如何获取表单数据

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.valuethis.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 })}}

react如何获取表单数据相关推荐

PHP获取表单数据的方法有几种,如何实现PHP获取表单数据与HTML嵌入PHP脚本
如何实现PHP获取表单数据与HTML嵌入PHP脚本导语:如何实现PHP获取表单数据与HTML嵌入PHP脚本,下面是小编给大家提供的操作讲解,大家可以参考阅读,更多详情请关注应届毕业生考试网. 常用的 ...
python获取表单数据的代码_使用flask和python从html表单获取表单数据
我正在尝试在按下submit时从文本字段中获取表单数据,以便将其放入json格式并作为另一个页面访问json数据,该页面将是localhost:5000/info.每次我试图用request.form ...
观看慕课老师milanlover视频Tomcat装在Servlet的三种情况+Servlet获取表单数据+Servlet相对路径
在src新建TestServlet1: package servlet;import java.io.IOException; import java.io.PrintWriter;import ja ...
微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点: 1.所有的input textarea button全部包含在form表单元素 ...
servlet获取表单数据
1.sevlet获取表单数据在很多的情况下,我们需要在浏览器,Web服务器和后台程序之间传递数据.浏览器使用两种方法可将这些信息传递到Web服务器,分别为Get方法和Post方法. 2.Get方法, ...
JSP简单练习-获取表单数据
在JSP中,服务器端程序与客户端交互最常用的方法就是采用表单提交数据.表单提交的方法主要有两种,一种是get方法,另一种是post方法,两者最大的区别:使用get方法提交的数据会显示在浏览器的地址栏中 ...
服务器端获取表单数据
一.单个值单个值的表单标签有:文本框.密码框.文本域.下拉列表.单选项目如下: 获取单个值: 代码如下: <html><head><meta http-equiv=& ...
微信小程序表单数据提交服务器,微信小程序防走弯路之：提交表单获取表单数据...
1.简历一个简单的表单,点击'提交'按钮时,提交表单内容 2. 以姓名框为例 .wxml #调用formSubmit函数提交 class为 ...
JSP简单练习-EL获取表单数据
输入用户名和密码的界面: <%@ page language="java" contentType="text/html;charset=gb2312" ...

react如何获取表单数据

react如何获取表单数据？

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

react如何获取表单数据相关推荐

最新文章

热门文章