React学习日记6

032 react中的事件处理

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

不要过度使用refs

refs很多时候可以省略

<div>
          <input ref = {this.myRef} type="text" placeholder = "点击按钮提示数据"/>&nbsp;
          <button  onClick = {this.showData}>点我提示左侧数据</button> &nbsp;
          <input  onBlur={this.showData2} type="text" placeholder = "渲染组件到页面"/>&nbsp;
          </div>
      )
    }
    showData = ()=>{
      console.log(this.myRef);
    }
    // 当发生事件的元素和需要操作的元素是一个元素可以省略 ref
    //没有refs，react事件可以自动将事件源作为参数
    showData2 = (event)=>{
      console.log(event.target.value);
    }
  }

033 非受控组件

现用现取 就是非受控

class Login extends React.Component{
      handleSubmit = (event)=>{
        // 阻止表单提交
        event.preventDefault();
        const {username,password} = this
        alert(`username:${username.value},password:${password.value}`)
      }
      render(){
        return(
          <form action="<http://www.atguigu.com>" 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>
        )
      }
    }

不推荐refs

034 受控组件

class Login extends React.Component{
      state = {
        username:'',
        password:'',
      }
//这里的event是react帮我们维护的
      handleSubmit = (event)=>{
        // 阻止表单提交
        event.preventDefault();
        const {username,password} = this.state
        alert(username,password)
      }
      saveUsername = (e)=>{
        this.setState({username:e.target.value})
      }
      savePassword = (e)=>{
        this.setState({password:e.target.value})
      }
      // 页面所有输入类的DOM[比如input]随着输入维护到状态中，等需要用的时候再取出来
      render(){
        return(
          <form action="<http://www.atguigu.com>" onSubmit={this.handleSubmit} >
            用户名: <input onChange={this.saveUsername} type="text" name = 'username'/>
            密码: <input  onChange={this.savePassword} type="password" name='password' />
            <button>登录</button>
          </form>
        )
      }
    }

类似Vue中的双向数据绑定 推荐使用受控组件，省略掉refs

035 优化和函数柯里化

class Login extends React.Component{
      state = {
        username:'',
        password:'',
      }
      handleSubmit = (event)=>{
        // 阻止表单提交
        event.preventDefault();
        const {username,password} = this.state
        alert(username,password)
      }
      saveFormData = (dataType)=>{
        //这个dataTyp就是一个参数，这里运用到了柯里化，函数里面返回函数
        console.log(dataType);
        return (event)=>{
          //this.setState({dataType:event.target.value}) 这是错误的，在state里面都是字符串形式 dataType和'dataType'一样的
          this.setState({[dataType]:event.target.value})
        }
      }
      // 页面所有输入类的DOM[比如input]随着输入维护到状态中，等需要用的时候再取出来
      render(){
        return(
          <form action="<http://www.atguigu.com>" onSubmit={this.handleSubmit} >
            用户名: <input onChange={this.saveFormData('username')} type="text" name = 'username'/>
            密码: <input  onChange={this.saveFormData('password')} type="password" name='password' />
            <button>登录</button>
          </form>
        )
      }
    }

036 非柯里化的写法

用户名: <input onChange={(event)=>{this.saveFormData('username'),event}} type="text" name = 'username'/>