React之旅基础篇(四)

事件处理

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

  class Demo extends React.Component {
    
    
    // 创建ref容器
    myRef = React.createRef()
    // 展示左侧输入框的数据
    showData1 = () => {
    
    
      alert(this.myRef.current.value)
    }
    showData2 = (event) => {
    
    
      alert(event.target.value)
    }
    render(){
    
    
      return (
        <div>
          <input ref={
    
    this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
          <button onClick={
    
    this.showData1}>点击提示左侧输入信息</button>&nbsp;
          <input onBlur={
    
    this.showData2} type="text" placeholder="失去焦点提示数据" />
        </div>
      )
    }
  }
  ReactDOM.render(<Demo />,document.getElementById('test'))

收集表单数据

需求：定义一个包含表单的组件， 输入用户名密码后, 点击登录提示输入信息
效果图：

受控组件

页面中所有输入类的DOM，比如：下面案例的input框，随着你的输入，把输入的东西维护到state状态中，使用的时候直接从状态中取出来，就是受控组件。
推荐使用受控组件，受控组件没有使用到ref，官网提示请勿过度使用ref，写多了也有效率问题，能不写就不要写，听官方的话~

class Login extends React.Component{
    
    
  // 初始化状态
  state = {
    
    
    username:'',
    password:''
  }
  // 表单提交回调
  handleSubmit = (event) => {
    
    
    event.preventDefault()
    const {
    
    username,password} = this.state
    console.log(`用户名${
      
      username}密码${
      
      password}`)
  }
  // 保存用户名到状态中
  saveUsername = (event) => {
    
    
    this.setState({
    
    username:event.target.value})
  }
  savePassword = (event) => {
    
    
    this.setState({
    
    password:event.target.value})
  }
  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'))

非受控组件

表单中输入类DOM的值，现用现取就是非受控组件
理解现用现取：点击登录 – 调用handleSubmit方法，const {username,password} = this取节点，username.value取节点的value值

class Login extends React.Component{
    
    
  handleSubmit = (event) => {
    
    
    event.preventDefault() // 阻止默认事件
    const {
    
    username,password} = this
    console.log(`用户名${
      
      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'))

高阶函数 函数柯里化

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

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
    console.log(`用户名：${
      
      username} 密码：${
      
      password}`)
  }
  render(){
    
    
    return (
      <form onSubmit={
    
    this.handleSubmit}>
        用户名：<input type="text" onChange={
    
    this.saveFormData('username')} name="username" />
        密码：<input type="password" onChange={
    
    this.saveFormData('password')} name="password" />
        <button>登录</button>
      </form>
    )
  }
}
ReactDOM.render(<Login />,document.getElementById('test'))

不使用函数的柯里化

class Login extends React.Component{
    
    
  // 初始化状态
  state ={
    
    
    username:'',
    password:''
  }
  // 表单提交的回调
  handleSubmit = (event) => {
    
    
    event.preventDefault()
    const {
    
    username,password} = this.state
    console.log(`用户名${
      
      username} 密码：${
      
      password}`)
  }
  // 保存表单数据到状态中
  saveFormData = (dataType,event) => {
    
    
    this.setState({
    
    [dataType]:event.target.value})
  }
  render(){
    
    
    return (
      <form onSubmit={
    
    this.handleSubmit}>
        用户名：<input type="text" name="username" onChange={
    
    event => this.saveFormData('username',event)} />
        密码：<input type="password" name="password" onChange={
    
    event => this.saveFormData('password',event)} />
        <button>登录</button>
      </form>
    )
  }
}
ReactDOM.render(<Login />,document.getElementById('test'))