react中的事件处理

最新推荐文章于 2024-08-05 09:35:59 发布

予倾

最新推荐文章于 2024-08-05 09:35:59 发布

阅读量119

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/QZ9420/article/details/112204337

版权

react 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

DOM中的事件绑定有三种方式：

方式1：DOM0级别的事件绑定

   <body>
       <button id="btn">点我</button>
       <script>
           // DOM0级别的事件绑定
           let btn = document.getElementById("btn");
           btn.onclick = function(){
               console.log("点我干啥~");
           }
       </script>
   </body>

方式2：DOM2级别的事件绑定

    <body>
        <button id="btn">点我</button>
        <script>
            // DOM0级别的事件绑定
            let btn = document.getElementById("btn");
            btn.addEventListener("click",()=>{
                console.log("点我干啥~");
            })
        </script>
    </body>

方式3：HTML级别的事件绑定（方法后必须加括号）

   <body>
       <button id="btn" onclick="fn()">点我fn()</button>
       <button id="btn" onclick="fn">点我fn</button>  不加() 不OK
       <script>
           function fn(){
               console.log("点我干啥~");
           }
       </script>
   </body>

react中的事件绑定

在react事件处理中，this问题很重要。

处理this问题：
1）监听器可以变成箭头函数，在不传递参数的情况下，可以这样绑定：onClick={ this._clickHandle }
2）在构建函数（constructor）中，可以使用bind，对this进行绑定，绑定：onClick={ this._clickHandle } 不能传参
3）直接在使用监听时绑定 onClick={ this._clickHandle.bind(this,1,2) }

class MyCom extends Component{
    constructor(){
        super();
        this.state = {
            isHot:false
        }
        // bind返回一个改变了this指向的新函数
        this._clickHandle =  this._clickHandle.bind(this)
    }
    render(){
        let { isHot } = this.state
        return (
            <div>
                <h1>今天天气很{isHot ? "炎热" : "寒冷"}</h1>
                {/* onClick是React中对原生DOM中的onclick又一次封装 */}
                {/* <button onClick={ this._clickHandle }>切换</button> */}

                {/* 这里面的调用的_clickHandle是调用16行的_clickHandle */}
                <button onClick={ this._clickHandle }>切换</button>
            </div>
        )
    }
    _clickHandle(){
        console.log(this);  
        let { isHot } = this.state
        // 更新状态机
        this.setState({
            isHot:!isHot
        })
    }
}

4）推荐写法：onClick={ (e)=> this._clickHandle(111,222,e) }

class MyCom extends Component{
   constructor(){
       super();
       this.state = {
           isHot:false
       }
   }
   render(){
       let { isHot } = this.state
       return (
           <div>
               <h1>今天天气很{isHot ? "炎热" : "寒冷"}</h1>
               <button onClick={ (e)=> this._clickHandle(111,222,e) }>切换</button>
               <a href="xxx" onClick={ (e)=> this._clickHandle(111,222,e) }>切换</a>
           </div>
       )
   }
   _clickHandle(a,b,e){
       console.log(a,b,e);
       e.preventDefault(); // 阻止默认事件
       console.log(this);  
       let { isHot } = this.state
       // 更新状态机
       this.setState({
           isHot:!isHot
       })
   }
}