React 如何收集表单数据

非受控组件

 <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"/>  
        密码：<input ref={c=>this.password = c} name="password" type="text"/>  
        <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"/>  
        密码：<input onChange={this.savePassword} name="password" type="text"/>  
        <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] 使用"[]" 中括号来读取变量； 如组件传过去的是"username" 则使用[dataType] 就是username;

 不用高阶函数实现

<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>