React forms and events

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"

React Props

The main difference between state and props is that props is immutable and state can be changed based on interaction with the user. This is why some container components need to define the state to update and modify the data. Subprojects can only pass data through props.

---

Use Props

The following example demonstrates how to use props in a component:

React instance

Var HelloMessage = React . CreateClass ( { Render : function ( ) { Return < h1 > Hello { This . Props . Name } </ h1 >; } } ) ; ReactDOM . Render ( < HelloMessage Name = " Runoob " />, document . GetElementById ( ' example ' )

try it"

The name attribute in the instance is obtained by this.props.name.

---

Default Props

You can set the default value for props with the getDefaultProps () method, as follows:

React instance

Var HelloMessage = React . CreateClass ( { GetDefaultProps : function ( ) { Return { Name : ' Runoob ' } ; } , Render : function ( ) { Return < h1 > Hello { This . Props . Name } </ h1 >; } } ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' ) ) ;

try it"

---

State and Props

The following example demonstrates how to combine state and props in an application. We can set the state in the parent component and pass it on the subcomponent using props on the subcomponent. In the render function, we set the name and site to get the data passed by the parent.

React instance

Var WebSite = React . CreateClass ( { GetInitialState : function ( ) { Return { Name : " rookie tutorial " , site : " http://www.runoob.com " } ; } , Render : function ( ) { Return ( < Div > < Name Name = { this . State . Name } /> < Link Site = { this . State . Site } /> </ div > ) ; } } ) ; Var Name = React . CreateClass ( { Render : function ( ) { Return ( < H1 > { this . Props . Name } </ h1 > ) ; } } ) ; Var Link = React . CreateClass ( { Render : function ( ) { Return ( < A Href = { this . Props . Site } > { this . Props . Site } </ a > ) ; } } ) ; ReactDOM . Render ( < WebSite />, document . GetElementById ( ' example ' ) ) ;

try it"

---

Props validation

Props validation uses propTypes , which ensures that our application components are used correctly. React.PropTypes provides a lot of validators to verify that incoming data is valid. The JavaScript console will throw a warning when invalid data is passed to props.

The following example creates a Mytitle component, the attribute title is a must and is a string, and if it is a number,

React instance

Var Title = " rookie tutorial " ; // var title = 123; Var MyTitle = React . CreateClass ( { PropTypes : { Title : React . PropTypes . String . IsRequired , } , render : function ( ) { Return < h1 > { this . Props . Title } </ h1 >; } } ) ; ReactDOM . Render ( < MyTitle Title = { title } />, document . GetElementById ( ' example ' ) ) ;

try it"

If the title uses a numeric variable, the console will display the following error message:

More validators are described below:

React . CreateClass ( { PropTypes : { // can declare prop for the specified JS base data type, by default, these data are optional OptionalTray : React . React . React . React . PropTypes . String , // () () () () () () () () () () Objects that can be rendered numbers, strings, elements, or arrays OptionalNode : React . PropTypes . Node , // React element OptionalElement : React . PropTypes . Element , // Declare prop as an instance of class with the instanceof operator of JS. EgMessage : React . PropTypes . InstanceOf ( Message ) , // Use enum to limit prop to accept only specified values. OptionalEnum : React . PropTypes . OneOf ( [ ' News ' , ' Photos ' ] ) , // can be one of multiple object types OptionalUnion : React . PropTypes . OneOfType ( [ React . PropTypes . String , React . PropTypes . Number , React . PropTypes . InstanceOf ( Message ) ] ) , // specify an array of types OptionalArrayOf : React . PropTypes . ArrayOf ( React . PropTypes . Number ) , // Specifies the type of object OptionalObjectOf : React . PropTypes . ObjectOf ( React . PropTypes . Number ) , // object with specific shape parameters OptionalObjectWithShape : React . PropTypes . Shape ( { Color : React . PropTypes . String , fontSize : React . PropTypes . Number } ) , // any type plus `isRequired` to make prop not empty. RequiredFunc : React . PropTypes . Func . IsRequired , // Any type that can not be empty RequiredAny : React . PropTypes . Any . IsRequired , // Custom Validator . If the validation fails, you need to return an Error object. Do not use `console.warn` directly or throw an exception because` `oneOfType` will fail. CustomProp : function ( props , propName , componentName ) { If ( ! / Matchme /. Test ( props [ propName ] ) ) { Return New Error ( ' Validation failed! ' ) ; } } } , / * ... * / } ) ;