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, In the example, we set up the input box The above code will render a value of In the following example, we will show you how to use a form on a subcomponent. You need to create an event handle (handleChange) in the parent component as a In React, do not use the When you have to deal with multiple The following example shows how to use the When you need to update the parent component from the child component
<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. 3.22.1. A simple example ¶
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'));
Hello
Runoob!
of
input
Element and pass through the
onChange
the event response updates the value entered by the user. 3.22.2. Example 2 ¶
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.
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'));
3.22.3.
Select
drop-down menu ¶
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'));
3.22.4. Multiple forms ¶
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>);}}
3.22.5. React event ¶
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'));
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'));