React form with the event
This section will discuss how to use the forms in React.
It is an example of a simple
In the example we set the value of the input box inputvalue = {this.state.data}.When the input box value changes we can update the state. We can use theonChange event to listen for changes in input and modify the state.
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, 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') );
The above code will render a value of Hello w3big! Input element, and updated in response to user input values onChange event.
Example 2
In the following example I will show you how to use it in the form on the subassembly.onChange method triggers an update and update state value is transmitted to the input box sub-assembly of the valueup re-rendering interface.
You need your parent component is transmitted to the sub-assembly by creating an event handler(handleChange), and as a prop(updateStateProp).
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 w3big!'}; }, 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') );
React event
The following examples demonstrate to modify the data through the onClick event:
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: '本教程'}) }, render: function() { var value = this.state.value; return <div> <button onClick={this.handleChange}>点我</button> <h4>{value}</h4> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
When you need to update thestate from the parent component sub-assembly, you need to parent component by creating an event handler (handleChange),and delivered to your subassembly asprop(updateStateProp). Examples are as follows:
var Content = React.createClass({ render: function() { return <div> <button onClick = {this.props.updateStateProp}>点我</button> <h4>{this.props.myDataProp}</h4> </div> } }); var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: '本教程'}) }, render: function() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );