React事件【3】

事件

//快捷键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

1. this.handClick.bind(this);返回一个新的函数。效率低

2. 对象 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')
 }