In this section we will discuss how to use forms in React.
A simple example
In the example we set the input box input value value = {this.state.data} . We can update state when the input box value changes. We can use the onChange event to listen for changes in input and modify state.
React instance
Var HelloMessage = React . CreateClass ( {
GetInitialState : function ( ) {
Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) {
This . SetState ( { value : event . Target . Value } ) ; } , render : function ( ) {
Var Value = this . State . Value ; return < div > < input Type = " text " Value = { value } OnChange = { this . HandleChange } /> < h4 > { value } </ h4 > </ div >; }
} ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' )
) ;
try it"
The above code will render an input element with a value of Hello Runoob! And update the value entered by the user via the onChange event response.
Example 2
In the following example we will show you how to use a form on a subcomponent. The onChange method will trigger the state update and render the updated value to the value of the input box of the subcomponent to render the interface again.
You need to pass the parent component by creating an event handler ( handleChange ) and passing it as prop ( updateStateProp ) on your subcomponent .
React instance
Var Content = React . CreateClass ( {
Render : function ( ) {
Return < div > < input Type = " text " Value = { this . Props . MyDataProp } OnChange = { this . Props . UpdateStateProp } /> < h4 > { this . Props . MyDataProp } </ h4 > </ div >; }
} ) ; Var HelloMessage = React . CreateClass ( {
GetInitialState : function ( ) {
Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) {
This . SetState ( { value : event . Target . Value } ) ; } , render : function ( ) {
Var Value = this . State . Value ; return < div > < Content MyDataProp = { value }
UpdateStateProp = { this . HandleChange } > </ content > </ div >; }
} ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' )
) ;
try it"
React event
The following example demonstrates modifying the data with the onClick event:
React instance
Var HelloMessage = React . CreateClass ( {
GetInitialState : function ( ) {
Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) {
This setState ( { value : ' rookie tutorial ' } )
} , Render : function ( ) {
Var Value = this . State . Value ; return < div > < button OnClick = { this . HandleChange } > point me </ button > < h4 > { value } </ h4 > </ div >; }
} ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' )
) ;
try it"
When you need to update the state of the parent component from the subcomponent , you need to pass the parent component to your subcomponent by creating an event handler ( handleChange ) and as prop ( updateStateProp ). Examples are as follows:
React instance
Var Content = React . CreateClass ( {
Render : function ( ) {
Return < div > < button OnClick = { this . Props . UpdateStateProp } > point me </ button > < h4 > { this . Props . MyDataProp } </ h4 > </ div > }
} ) ; Var HelloMessage = React . CreateClass ( {
GetInitialState : function ( ) {
Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) {
This setState ( { value : ' rookie tutorial ' } )
} , Render : function ( ) {
Var Value = this . State . Value ; return < div > < Content MyDataProp = { value }
UpdateStateProp = { this . HandleChange } > </ content > </ div >; }
} ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' )
) ;
try it"
EmoticonEmoticon