onChange Event

by Allie Yu

HTML

<div id="app"></div>

React

class ChangeInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };

    this.changeText = this.changeText.bind(this);
  }

  changeText(event) {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <div>
        <label htmlFor="name">Enter Text here </label>
        <input type="text" id="name" onChange={this.changeText} />
        <h3>{this.state.name}</h3>
      </div>
    );
  }
}

const rootElement = document.getElementById("app");
ReactDOM.render(<ChangeInput />, rootElement);