受控组件、非受控组件、柯里化

原则：先使用操作状态，实在不行才操作DOM，先推荐使用受控组件

一、受控组件

文本框输入内容后

会触发文本框发的change事件

调用setState后状态会更新

同时组件重新渲染

render多次调用拿到最新文本框的值

并且最终把最新的文本框值渲染到页面中

import { Component } from 'react'
import ReactDOM from 'react-dom'

class Person extends Component {
  state = {
    username: '',
    password: '',
    ipt: '',
  }
  saveUsername = (e) => {
    this.setState({ username: e.target.value })
  }
  savePassword = (e) => {
    this.setState({ password: e.target.value })
  }
  handleSubmit = (e) => {
    e.preventDefault()
    const { username, password } = this.state
    console.log(`${username},${password}`)
  }
  // 受控组件
  inputValue = (e) => {
    this.setState({
      ipt: e.target.value,
    })
  }
  render() {
    return (
      <>
        {/* 受控组件 */}
        <input type="text" value={this.state.ipt} onChange={this.inputValue} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.saveUsername} type="text" name="username" />
          <input onChange={this.savePassword} type="password" name="password" />
          <button>提交</button>
        </form>
      </>
    )
  }
}
ReactDOM.render(<Person />, document.getElementById('root'))

二、非受控组件

class Person extends React.Component {
  handleSubmit=(e)=>{
    console.log(this);
    e.preventDefault()
    const {username,password}=this
    alert(`${username.value},${password.value}`)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input ref={c=>this.username=c} type="text" name='username' />
        <input ref={c=>this.password=c} type="password" name='password'/>
        <button>点击提交表单</button>
      </form>
    )
  }
}
ReactDOM.render(<Person/>,document.getElementById('test'))

柯里化

// 高阶函数：如果一个函数符合以下两个规范中任意一个，那么该函数就是高阶函数
// 1、若A函数，接收得参数是一个函数，那么A就可以称之为高阶函数
// 2、若A函数，调用得返回值依然是一个函数，那么A就可以称之为高阶函数
//    常见的高阶函数有：Promise、setTimeOut、arr.map()等等
// 函数柯里化：通过函数调用继续返回函数得方式，实现多次接收参数最后统一处理得编码形式

class Person extends React.Component {
  state={
    username:'',
    password:''
  }
  saveFormData=(dataType=>{
    return (e)=>{
      this.setState({[dataType]:e.target.value})
    }
  })
  handleSubmit=(e)=>{
    e.preventDefault()
    const {username,password}=this.state
    console.log(`${username},${password}`);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input onChange={this.saveFormData('username')} 
            type="text" name='username' />
        <input onChange={this.saveFormData('password')} 
            type="password" name='password' />
        <button>提交</button>
      </form>
    )
  }
}
ReactDOM.render(<Person/>,document.getElementById('test'))

 不使用柯里化实现

class Person extends React.Component {
  state={
    username:'',
    password:''
  }
  saveFormData=(dataType,e)=>{
    return this.setState({[dataType]:e.target.value})
  }
  handleSubmit=(e)=>{
    e.preventDefault()
    const {username,password}=this.state
    console.log(`${username},${password}`);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input onChange={(e)=>this.saveFormData('username',e)} 
            type="text" name='username' />
        <input onChange={(e)=>this.saveFormData('password',e)} 
            type="password" name='password' />
        <button>提交</button>
      </form>
    )
  }
}
ReactDOM.render(<Person/>,document.getElementById('test'))