React values in the unbound text box with the state of

In React, by default, only single data stream, which is the only binding on the state of data on a page, but you can not change the data in the page is automatically synchronized back to the state. If you need to save the data changes on the page to the state, the need for programmers to manually monitor onChange event, to get the latest data, manually call this.setState ({}) to change back.

 

 E.g:

React from Import 'REACT' ; 

Export default class BindInputValue the extends React.Component { 
    constructor () { 
        Super (); 
        // private data of 
        the this .STATE = { 
            MSG: 'ha' , 
            name: 'John Doe' , 
            Age: 22 is , 
            Gender: 'M' 
        } 
    } 

    the render () { 
        return <div> 
            { / * NOTE: onClick function as the handler receives only * / }
             <= {Button the onClick () => { the this.myclickHandler ()}}> button </ Button> 
            { / * Click modify the value of the msg * / }
             <H3> { the this .state.msg} </ H3> 
            { / * value attribute if we just put the text box bound state to state, without providing onChange handler, then the text box will be obtained a read-only text box * / } 
            { / * when the value of the text box binding value, or while providing a readOnly or a onChange handler * / } 
            { / * <INPUT type = "text" style = {{width: '100%'} = {value}} this.state.msg readOnly /> * / }
             <INPUT type = " text "style = {{width: '100%'} = {value} the this .state.msg the onChange} = {(E) => { the this.txtChange (E)}} = REF "TXT" /> 
        </ div>     } // whenever the contents of the text box changed, this inevitably calls txtChange 
    txtChange = (E) => { 
        the console.log ( 'textbox content changed ' );
         // get the value of the text box in the event there are two programs onChange @ scheme 1: is acquired by event parameter E         the console.log (e.target.value); 
        const NewMsg = e.target .Value;
         // text box to this.state state synchronization attribute to the this .setState ({ 
            MSG: NewMsg 
        }); // Option 2: attribute ref acquired by 
        the console.log ( the this .refs.txt.value) ; 
    } // this is an example of a method


    
        

        

        

    
    = myClickHandler () => { 
        console.log ( the this );
         // Note 1: React, if you want to re-assign the data in the state, do not use *** = *** this.state. 
        // should call React provided this.setState ({MSG: '***'}) 
        // this.state.msg = 'ooooooooooo'; 

        // only update the corresponding state in the setState without overwriting other state state 
        the this .setState ({ 
            MSG: '123' 
        }, function () {   // callback 
            the console.log ( the this .state.msg); 
        }) 

        // NOTE 2: the method of execution is asynchronous this.setState, If you want to immediately get the latest state value, you need to use this.setState ({}, callback) after the completion of call this.setState        
        //console.log(this.state.msg);
    }
}