React 事件方法

一、位置

与constructor(props){} 、render(){}同级

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    sayHello() {
        alert('Hello World!')
    }

    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.sayHello}></button>
            </div>
        )
    }
}

页面
点击按钮后弹出

二、获取state里的值

通过改变this的指向，有三种方法：

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件',
            msg1: '我是一个Test组件1',
            msg2: '我是一个Test组件2',
            msg3: '我是一个Test组件3',
        }
        // 第二种方法
        this.getStateMSG2 = this.getStateMSG2.bind(this)
    }
    // 第一种方法
    getStateMSG1() {
        alert(this.state.msg1)
    }
    // 第二种方法
    getStateMSG2() {
        alert(this.state.msg2)
    }
    // 第三种方法，最常用！
    getStateMSG3 = () => {
        alert(this.state.msg3)
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                {/*第一种，调用时候绑定this*/}
                <button onClick={this.getStateMSG1.bind(this)}>获取msg1</button>
                <br/>
                {/*第二种，构造函数里指定this*/}
                <button onClick={this.getStateMSG2}>获取msg2</button>
                <br/>
                {/*第三种，箭头函数实现*/}
                <button onClick={this.getStateMSG3}>获取msg3</button>
            </div>
        )
    }
}

页面
点击了获取msg1按钮后弹出
点击了获取msg2按钮后弹出
点击了获取msg3按钮后弹出

三、修改state里的值

通过调用this.setState方法，参数为对象，里面是要修改的state里的键值对。
因为要用到this，所以要特别注意this的指向，参考获取state里的三种改变this指向的方法。

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    setStateMSG = () => {
        this.setState({
            msg: '这是改变后的值'
        })
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.setStateMSG}>改变msg</button>
            </div>
        )
    }
}

原来的页面
点击改变msg按钮后，内容变了

四、执行方法传参

不可以在调用时候，直接传，会立即调用而且会报错，应改为使用bind方法传参。

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    setStateMSG = str => {
        this.setState({
            msg: str
        })
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.setStateMSG.bind(this, 'Hello World!')}>改变msg</button>
            </div>
        )
    }
}

原页面
点击改变msg按钮后