React 之 事件处理(事件委托,非受控组件)

React 之 组件实例的三大核心属性 (state props ref)

为什么用到事件处理(事件委托)?

在react中,官方提示:请勿过度使用ref , 所以可以通过事件委托来处理

/* 
        1.通过onXxx属性指定事件处理函数(*注意大小写)
           a.React使用的是自定义(合成)事件,而不是使用的原生DOM事件
           b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)  ---为了更好的兼容性
        2.通过event.target得到发生事件的dom元素对象
      */
      myRef = React.createRef()
      myRef2 = React.createRef()
      showData = ()=>{
        console.log(this.myRef2.current.value)
      }
      showData2 = (event)=>{
        console.log(event.target);
      }
      render(){
        return (
          <div>
              <input type="text" ref={this.myRef}  placeholder="点击提交按钮"/>&nbsp;
              <button onClick={this.showData }>点我输出左边信息</button>
              <input type="text" onBlur={this.showData2} ref={this.myRef2} placeholder="点击提交按钮"/>&nbsp;
          </div>
        )
      }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test1'))

事件委托是依附在事件冒泡上的,可以通过点击父级标签然后根据e.target来找到对应的标签来处理

 

受控组件   通过state来进行处理

class Demo extends React.Component {
      state = {
        userName:'',
        password:''
      }
      handleSubmit=(event)=>{
        event.preventDefault()
        let {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} ref={c=>this.username=c} type="text" name="username"/>
             密码: <input onChange={this.savePassword} type="password" name="password" />
             <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test1'))

 

非受控组件  现用现取

class Demo extends React.Component {
      handleSubmit=(event)=>{
        event.preventDefault()
        console.log(this.username.value)
        console.log(this.password.value);
        console.log(`您输入的用户名是:${this.username.value},您输入的密码是:${this.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(<Demo/>,document.getElementById('test1'))