React forms and events

React forms and events

In this section we'll discuss how to use forms in React.

One simple is an example

In the instance, we set up the input box input value . W e can update state when the input box value changes. We can use the onChange event to listen for changes in input and modify state.

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello W3CSchool!'};
  },
  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 out . . .

The code above renders a value of Hello W3CSchool! input element and update the user-entered value through the onChange event response.

Instance 2

In the following example, I'll show you how to use forms on sub-components. The onChange method triggers an update to state and passes the updated value to the value of the input box of the sub-component to re-render the interface.

You need to pass the parent component to your child component by creating an event handle (handleChange) and as 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 W3CSchool!'};
  },
  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 out . . .

React event

The following example demonstrates modifying data with the onClick event:

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello W3CSchool!'};
  },
  handleChange: function(event) {
    this.setState({value: 'W3Cschool教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <button onClick={this.handleChange}>点我</button>
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

Try it out . . .

When you need to update the state of the parent component from a child component, you need to pass the event handle (handleChange) on the parent component and pass it to your child component as prop (updateStateProp). Here's an example:

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 W3CSchool!'};
  },
  handleChange: function(event) {
    this.setState({value: 'W3Cschool教程'})
  },
  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 out . . .