React事件，修改this.state的值

1、React中绑定事件

　　React中绑定事件格式：

onClick = { function }

　　React中绑定事件的标准用法：

import React from 'react'

export default class Hello5 extends React.Component {
    constructor() {
        super()
        this.state = {
            msg: '测试点击事件'
        }
    }
    render() {
        return <div>
            基于class创建组件, {this.props.id} + '--' + {this.props.name}
            <h4>{this.state.msg}</h4>

            {/* 测试点击事件 */}
            <button id="btn" onClick={ () => this.myOnclickHandler('hehe') }>测试点击事件</button>
            </div>
    }

    // myOnclickHandler(msg) {
    //     console.log(msg)
    // }

    myOnclickHandler = (msg) => {
        console.log(msg)
    }
}

 

2、修改this.state的值

　　通过this.setState({})来修改

import React from 'react'

export default class Hello5 extends React.Component {
    constructor() {
        super()
        this.state = {
            msg: '测试点击事件'
        }
    }
    render() {
        return <div>
            基于class创建组件, {this.props.id} + '--' + {this.props.name}
            <h4>{this.state.msg}</h4>

            {/* 测试点击事件 */}
            <button id="btn" onClick={ () => this.myOnclickHandler(this.state.msg) }>测试点击事件</button>
            </div>
    }

    // myOnclickHandler(msg) {
    //     console.log(msg)
    // }

    // myOnclickHandler = (msg) => {
    //     console.log(msg)
    //     console.log(this.state.msg)
    //     this.setState({msg:'msg被修改了。。。'}) // 只是更新msg属性，如果有其它属性不会丢失或覆盖
    //     console.log(this.state.msg) // 此时还没有修改，因为setState()是异步的
    // }

    myOnclickHandler = (msg) => {
        console.log(msg)
        console.log(this.state.msg)
        this.setState({msg:'msg被修改了。。。'}, function () {
            console.log(this.state.msg)
        })
    }
}

 

　　this.state修改前

 　　this.state修改后