react如何获取表单数据

简介: 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.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 })
    }
  }
相关文章
|
7天前
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
21 1
|
10天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
56 2
|
7天前
|
前端开发 JavaScript 数据安全/隐私保护
深入探索研究React表单
【10月更文挑战第6天】
84 57
|
1月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
50 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
1月前
|
前端开发
react中使用Modal.confirm数据不更新的问题解决
文章讨论了在React中使用Ant Design的`Modal.confirm`时更新数据不生效的问题,并提供了解决方案。原因是React状态更新可能是异步的,导致Modal的内容更新后不会立即反映在UI上。解决办法是在状态更新后使用`useEffect`钩子来调用Modal实例的`update`方法,从而更新Modal的内容。
43 0
react中使用Modal.confirm数据不更新的问题解决
|
16天前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
36 0
|
1月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
46 0
|
1月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
2月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
32 0
|
2月前
|
容器 Kubernetes Docker
云原生JSF:在Kubernetes的星辰大海中,让JSF应用乘风破浪!
【8月更文挑战第31天】在本指南中,您将学会如何在Kubernetes上部署JavaServer Faces (JSF)应用,享受容器化带来的灵活性与可扩展性。文章详细介绍了从构建Docker镜像到配置Kubernetes部署全流程,涵盖Dockerfile编写、Kubernetes资源配置及应用验证。通过这些步骤,您的JSF应用将充分利用Kubernetes的优势,实现自动化管理和高效运行,开启Java Web开发的新篇章。
50 0