React event, modify the value this.state

1, React bound event

　　React bound event format:

onClick = { function }

　　React binding standard usage in the event of:

React from Import 'REACT' 

Export default class Hello5 the extends React.Component { 
    constructor () { 
        Super () 
        the this .STATE = { 
            MSG: 'test click event' 
        } 
    } 
    the render () { 
        return <div> 
            class-based creation component, { the this .props.id} + '-' + { the this .props.name}
             <H4> { the this .state.msg} </ H4>
 
            { / * test click event * / }
             <Button ID = "BTN" the onClick {= () => this.myOnclickHandler ( 'Hehe') }> test click event </button> 
            </div>    }


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

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

 

2, a value modified this.state

　　Modified by this.setState ({})

React from Import 'REACT' 

Export default class Hello5 the extends React.Component { 
    constructor () { 
        Super () 
        the this .STATE = { 
            MSG: 'test click event' 
        } 
    } 
    the render () { 
        return <div> 
            class-based creation component, { the this .props.id} + '-' + { the this .props.name}
             <H4> { the this .state.msg} </ H4>
 
            { / * test click event * / }
             <Button ID = "BTN" the onClick {= () => the this .myOnclickHandler ( the this.state.msg)}> Test click event </ Button> 
            </ div>     } // myOnclickHandler (MSG) { //      the console.log (MSG) // } // myOnclickHandler = (MSG) => { //      Console .log (msg) //      the console.log (this.state.msg) //      this.setState ({msg: '... is modified msg'}) // update msg attribute only if the other properties are not lost or overwritten //      the console.log (this.state.msg) // not modified at this time, because the setState () is asynchronous // } 
    myOnclickHandler = (MSG) => { 
        the console.log (MSG) 
        the console.log ( the this .state.msg)
         this.setState ({MSG: 'MSG is modified ...'}, function () {


    
    
    

    
    
    
    
    
    
 
            console.log (the this.state.msg)
        })
    }
}

 

　　this.state before the amendment

 　　After this.state modified