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 })
    }
  }
相关文章
|
1月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
66 1
|
3月前
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库,专注于简化受控表单的开发,提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性,支持第三方UI库集成,并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子,开发者可以快速构建表单应用,同时支持动态表单和自定义验证规则。该库旨在提高开发效率,适用于复杂表单场景,降低学习和维护成本。
187 2
react 表单受控的现代实现方案
|
2月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
1月前
|
缓存
react18【系列实用教程】useMemo —— 缓存数据 (2024最新版)
react18【系列实用教程】useMemo —— 缓存数据 (2024最新版)
25 0
|
2月前
|
前端开发
react通过上下文深入传递数据
react通过上下文深入传递数据
|
2月前
|
存储 前端开发 数据可视化
React 中重新实现强制实施表单
React 中重新实现强制实施表单
|
3月前
|
存储 前端开发 JavaScript
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。
|
3月前
|
前端开发
掌握React中的useContext:访问父组件数据的神奇技巧
掌握React中的useContext:访问父组件数据的神奇技巧
|
3月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
58 0
|
3月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
51 0

热门文章

最新文章