React 事件

触发事件的流程就是  触发事件 引起回调 、

类式组件要通过 this 查找

函数式组件 不用this   

  class MyComponent extends React.Component{
    PostData = (e) =>{
      e.preventDefault() // 阻止表单默认提交
      const {username,password} = this
      alert(`用户名是${username.value},密码是${password.value}。`)
    }
    render(){
      return (
        <form action="" onSubmit={this.PostData}>
          用户名：<input name="username" ref={e => this.username = e}/>
          密码：<input name="password" ref={e => this.password = e}/>
          <button type="submit">提交</button>
        </form>
      )
    }
  }

1.通过onAaa 属性指定事件处理函数（注意大小写）

onClick 、onChange、onBulr、onLoad .......

  React使用的是自定义事件（合成）事件，而不是使用原生DOM事件  ---为了更好的兼容 

  React 中的事件是通过事件委托的方式处理的（委托给组件最外层的元素） --为了更高效 

2.通过event.target 得到发生事件的DOM元素对象 --- 不要过度使用ref 

  3.非受控组件与受控组件 

  非受控组件：现用现取  不用state 里的数据 

  受控组件：实时绑定到state里  最后提交的是state里的数据 （可以省略表单项里的ref 更符合官网要求）

事件回调进行参数传递

需要 ：行内外部包裹一层函数

<input name="username" onChange={e => this.saveFormData2('username',e)} />

  saveFormData2= (datatype,e) => {

      this.setState({

        [datatype]:e.target.value

      })

  }

 或者在处理回调时 再return 一层函数

<input name="username" onChange={this.saveFormData('username')} />

  saveFormData= (datatype) => {

    return (e) => {

      this.setState({

        [datatype]:e.target.value

      })

    }

  }

class MyComponent4 extends React.Component{
  state = {
    username:'',
    password:''
  }

  ShowData5 = (e) =>{
    e.preventDefault() // 阻止表单默认提交
    const {username,password} = this.state
    alert(`用户名是${username},密码是${password}。`)
  }

  saveFormData2= (datatype,e) => {
      this.setState({
        [datatype]:e.target.value
      })
  }

  render(){
    return (
      <form action="" onSubmit={this.ShowData5}>
        用户名：<input name="username" onChange={e => this.saveFormData2('username',e)} />
        密码：<input name="password" onChange={e => this.saveFormData2('password',e)} />
        <button type="submit">提交</button>
      </form>
    )
  }
}