React forms and events
In this section we will discuss how to use forms in React.
HTML form elements are different from other DOM elements in React because form elements are born with some internal state.
In HTML, things like input, <textarea> , and <select> These types of form elements maintain their own state and are updated based on user <input> . However, in React, mutable states are usually saved in the component’s state properties and can only be used with setState() update the method.
A simple example
In the example, we set up the input box input value value = {this.state.data} . We can update the state when the value of the input box changes. We can use it. onChange events to monitor input change and modify state .
React instance
classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello
Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:event.target.value});}render(){varvalue=this.state.value;return<div>
<inputtype="text"value={value}onChange={this.handleChange}/>
<h4>{value}</h4>
</div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example'));
The above code will render a value of Hello Runoob! of input Element and pass through the onChange the event response updates the value entered by the user.
Example 2
In the following example, we will show you how to use a form on a subcomponent. onChange method will trigger state and pass the updated value to the input box of the child component value come up and re-render the interface.
You need to create an event handle (handleChange) in the parent component as a prop (updateStateProp) pass it to your subcomponents.
React instance
classContentextendsReact.Component{render(){return<div>
<inputtype="text"value={this.props.myDataProp}onChange={this.props.updateStateProp}/>
<h4>{this.props.myDataProp}</h4>
</div>;}}classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello
Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:event.target.value});}render(){varvalue=this.state.value;return<div>
<ContentmyDataProp={value}updateStateProp={this.handleChange}></Content>
</div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example'));
Select drop-down menu
In React, do not use the selected property, while at the root select use on the label value property to represent the selected item.
React instance
classFlavorFormextendsReact.Component{constructor(props){super(props);this.state={value:'coconut'};this.handleChange=this.handleChange.bind(this);this.handleSubmit=this.handleSubmit.bind(this);}handleChange(event){this.setState({value:event.target.value});}handleSubmit(event){alert('Your
favorite flavor
is:'+this.state.value);event.preventDefault();}render(){return(<formonSubmit={this.handleSubmit}>
<label> Choose your favorite website
<selectvalue={this.state.value}onChange={this.handleChange}>
<optionvalue="gg">Google</option> <optionvalue="rn">Runoob</option>
<optionvalue="tb">Taobao</option> <optionvalue="fb">Facebook</option>
</select> </label> <inputtype="submit"value="submit to"/>
</form>);}}ReactDOM.render(<FlavorForm/>,document.getElementById('example'));
Multiple forms
When you have to deal with multiple input element, you can add a name property to make the handler function based on the event.target.name to choose what to do.
React instance
classReservationextendsReact.Component{constructor(props){super(props);this.state={isGoing:true,numberOfGuests:2};this.handleInputChange=this.handleInputChange.bind(this);}handleInputChange(event){consttarget=event.target;constvalue=target.type==='checkbox'?target.checked:target.value;constname=target.name;this.setState({[name]:value});}render(){return(<form>
<label> Do you want to leave:
<inputname="isGoing"type="checkbox"checked={this.state.isGoing}onChange={this.handleInputChange}/>
</label> <br/> <label> Visitor count:
<inputname="numberOfGuests"type="number"value={this.state.numberOfGuests}onChange={this.handleInputChange}/>
</label> </form>);}}
React event
The following example shows how to use the onClick event to modify the data:
React instance
classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello
Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:'Rookie Tutorial'})}render(){varvalue=this.state.value;return<div>
<buttononClick={this.handleChange}>Click me</button> <h4>{value}</h4>
</div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example'));
When you need to update the parent component from the child component state need to create an event handle (handleChange) in the parent component as a prop (updateStateProp) pass it to your subcomponents. Examples are as follows:
React instance
classContentextendsReact.Component{render(){return<div>
<buttononClick={this.props.updateStateProp}>Click me</button>
<h4>{this.props.myDataProp}</h4>
</div>}}classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello
Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:'Rookie Tutorial'})}render(){varvalue=this.state.value;return<div>
<ContentmyDataProp={value}updateStateProp={this.handleChange}></Content>
</div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example'));