React事件【3】

最新推荐文章于 2024-10-05 19:05:05 发布

tscn1

最新推荐文章于 2024-10-05 19:05:05 发布

阅读量84

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/tscn1/article/details/119419961

版权

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在React中如何处理组件事件，包括原生事件和自定义事件的使用。对于自定义组件，事件需要作为属性传递并手动调用。同时，文章探讨了绑定`this`的两种方式：使用`bind`函数和箭头函数。`bind`虽然简单但效率较低，而箭头函数可以保持正确的上下文，提高效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件

//快捷键imr
import React from 'react'
//imrd
import ReactDOM from 'react-dom'

在React中，组件的事件，本质就是一个属性。

事件名为小驼峰命名。

原生的组件如内置事件与原生的使用一样。

const btn = < button onClick = {
    (e) => {
        console.log('点击了', e);
    }
} > 点击 < /button>;

ReactDOM.render(btn, document.getElementById('root'));

自定义组件的事件

本身就是一个组件的属性。自定义组件不会像内置组件的一样会自动调用事件。自定义的事件当成一个属性用，一定要调用才会运行。

export default class Tickcontrol extends Component {
    state = {
        isOver: false
    }
    render() {
        let status = '倒计时开始';
        if (this.state.isOver) {
            status = '倒计时结束'
        }
        return ( <
            div >
            <
            Tick num = {
                10
            }
            onOver = {
                () => {
                    this.setState({
                        isOver: true
                    })
                }
            }
            /> <
            h2 > {
                status
            } <
            /h2> <
            /div>
        )
    }
}

绑定this

使用bind

this.handClick.bind(this);返回一个新的函数。效率低
对象 proto handClick函数，效率高

export default class Tickcontrol extends Component {
    state = {
        isOver: false
    }
    isOver() {
        console.log('sdf')
    }
    constructor(props) {
        super(props);
        this.isOver = this.isOver.bind(this);
    }
    render() {
        let status = '倒计时开始';
        if (this.state.isOver) {
            status = '倒计时结束'
        }
        return ( <
            div >
            <
            Tick num = {
                10
            }
            onOver = {
                this.isOver
            }
            /> <
            h2 > {
                status
            } <
            /h2> <
            /div>
        )
    }
}

使用箭头函数

 isOver = () => {
     console.log('sdf')
 }