react基础篇（三）

目录

事件处理

收集表单数据

非受控组件

受控组件

柯里化

高阶函数，函数柯里化

不用函数柯里化实现函数复用

---

事件处理

1. 通过onXxx属性指定事件处理函数（注意大小写）
   • React使用的是自定义（合成）事件，而不是使用原生dom事件——为了更好的兼容性
   • React中的事件是通过事件委托方式处理的（委托给组件最外层的元素，事件冒泡）——为了更高效
2. 通过event.target得到发生事件的dom元素对象——不要过度使用ref

收集表单数据

非受控组件

说明：“现用现取”的数据称为非受控组件，例如form表单中的输入dom，input radio等，都是提交表单的时候获取值的

  <script type="text/babel">
    // 创建实例 
    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 type="text" ref={c => this.username = c} name="username"/>
            密码：<input type="password" ref={c => this.password = c} name="password"/>
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
  </script>

受控组件

说明：存放在state状态里面，等需要用到的时候，再从state里面取出来用，而不是“现取现用”

由于react里面没有双向绑定的概念，所以只能用onChange监听改变事件

受控式组件没有过多的ref

  <script type="text/babel">
    // 创建实例 
    class Login extends React.Component{
      state = {
        username: '',
        password: ''
      }

      // 保存username到state里面
      saveUsername = (event)=>{
        this.setState({username: event.target.value})
      }

      // 保存password到state里面
      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} type="text" name="username"/>
            密码：<input onChange={this.savePassword} type="password" name="password"/>
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
  </script>

柯里化

高阶函数，函数柯里化

概念： 如果一个函数符合下面两个规范中的任何一个，那该函数就是高阶函数

1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数

2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

   常见的高阶函数有Promise（New Promise(()=>{}）,setTimeout(()=>{}), arr.map() 等等

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

// 柯里化
sum = (a)=>{
  return (b)=>{
    return (c)=>{
      return a+b+c
    }
  }
}

tips：通过变量setState

// dataType是一个变量
this.setState({[dataType]: event.target.value})

不用函数柯里化实现函数复用

在标签内写一个函数，直接调用

    // 创建实例 
    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)}} type="text" name="username"/>
            密码：<input onChange={(event)=>{this.saveFormData('password',event)}} type="password" name="password"/>
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))