ReactJS: Làm việc với Form, Inputs và Events trong React

Start project

How to Work with Forms, Inputs and Events

ReatcJS 2018

class FormComponent extends React.Component {
  constructor(props){
      super(props);
      this.state = {firstName: ""};
      this.state = {lastName: ""};
  }
  handleFirst = (event) => {
    this.setState({firstName: event.target.value});
  }
  handleLast = (event) => {
    this.setState({lastName: event.target.value});
  }
  handleSubmit = (event) => {
    alert(this.state.lastName +" "+ this.state.firstName);
    event.preventDefault();
  }
  render() {
    return (
      <form className="mt-3 ml-2" onSubmit={this.handleSubmit}>
          <div className="col-sm-3 mb-2">
            <input type="text" className="form-control" placeholder="First name" value={this.state.firstName} onChange={this.handleFirst}/>
          </div>
          <div className="col-sm-3 mb-2">
            <input type="text" className="form-control" placeholder="Last name" value={this.state.lastName} onChange={this.handleLast}/>
          </div>
          <div className="col-sm-3">
            <input type="submit" className="btn btn-primary" value="Submit"/>
          </div>
      </form>
    );
  }
}

ReactDOM.render(
  <FormComponent/ >
  ,document.getElementById('root'));