欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react中收集表单数据

程序员文章站 2024-02-26 23:20:10
...

非受控组件

 <div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <script type='text/babel'>
  <div id="test"></div>
  class Login extends React.Component{ 
  handleSubmit =(event)=>{
    event.preventDefault()//阻止默认表单提交
    const {username,password} =this
    alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`)
  }
  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        用户名:<input ref={c=>this.username = c} name="username" type="text"/>  &nbsp;
        密码:<input ref={c=>this.password = c} name="password" type="text"/>  &nbsp;
        <button>登录</button>
      </form>
    )
  }}
  ReactDOM.render(<Login/>,document.getElementById('test'))
  </script>

event.preventDefault()
//阻止默认表单提交

受控组件

<div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>

  <script type='text/babel'>
  <div id="test"></div>
  class Login extends React.Component{ 
  state ={
    username:'',//用户名
    password:''//密码
  }
  // 保存用户名到状态中
  saveUsername = (event)=>{
    this.setState({username:event.target.value})
  }
  // 保存密码到状态中
  savePassword = (event)=>{
    this.setState({password:event.target.value})
  }
  // 表单提交的回调
  handleSubmit = (event)=>{
    event.preventDefault()//阻止默认表单
    const {username,password}= this.state
    alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
  }
  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        用户名:<input onChange={this.saveUsername} name="username" type="text"/>  &nbsp;
        密码:<input onChange={this.savePassword} name="password" type="text"/>  &nbsp;
        <button>登录 </button>
      </form>
    ) 
  }
}
  ReactDOM.render(<Login/>,document.getElementById('test'))
  </script>

高阶函数:

如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

  1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
  2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。常见的高阶函数有: Promise、setTimeout、arr.map()等等

函数的柯里化

通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

<script>
    function sum(a,b,c){
      return a+b+c
    }
    //函数的柯里化 (高阶函数)
    function sum(a){
      return(b)=>{
        return(c)=>{
          return a+b+c
        }
      }
    }
    const result = sum(1)(2)(3)
    console.log(result);
  </script>
<div id="test"></div>
  class Login extends React.Component{ 
  state ={
    username:'',//用户名
    password:''//密码
  }
  // 保存表单数据到状态中(高阶函数) 函数的柯里化 
  saveFormData =(dataType)=>{
    return(event)=>{
      this.setState({[dataType]:event.target.value})
    }
  }

  // 表单提交的回调
  handleSubmit = (event)=>{
    event.preventDefault()//阻止默认表单
    const {username,password}= this.state
    alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
  }
  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        用户名:<input onChange={this.saveFormData('username')} name="username" type="text"/>  &nbsp;
        密码:<input onChange={this.saveFormData('password')} name="password" type="password"/>  &nbsp;
        <button>登录 </button>
      </form>
    ) 
  }
}
  ReactDOM.render(<Login/>,document.getElementById('test'))
  </script>

[dataType] 读取里面的数据 而不是用dataType

不用高阶函数实现

<script type='text/babel'>
  <div id="test"></div>
  class Login extends React.Component{ 
  state ={
    username:'',//用户名
    password:''//密码
  }
  // 保存表单数据到状态中
  saveFormData =(dataType,event)=>{
    this.setState({[dataType]:event.target.value})
  }

  // 表单提交的回调
  handleSubmit = (event)=>{
    event.preventDefault()//阻止默认表单
    const {username,password}= this.state
    alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
  } 
  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        用户名:<input onChange={event=>this.saveFormData('username',event)} name="username" type="text"/>  &nbsp;
        密码:<input onChange={event=>this.saveFormData('password',event)} name="password" type="password"/>  &nbsp;
        <button>登录 </button>
      </form>
    ) 
  }
}
  ReactDOM.render(<Login/>,document.getElementById('test'))
  </script>