ReactJS: [Forms] Bắt sự kiện nhiều thẻ Input - Handling Multiple Inputs

Start project

Handling Multiple Inputs

ReatcJS 2018

class FormComponent extends React.Component {
  constructor(props){
      super(props);
      this.state = {color: 'ping', isCheck: true, name: ''};
  }
  handleChange = (event) => {
    const target = event.target;
    let value = null;
    if(target.type === 'checkbox'){
      value =  target.checked;
      this.setState({color: value});
    } else {
      value =  target.value;
      this.setState({color: value});
    }
    this.setState({name: value});
  }
  handleSubmit = (event) => {
    alert(this.state.name);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit} className="mt-3 ml-3">
        <select value={this.state.color} onChange={this.handleChange} className="form-control col-4 col-sm-4 col-md-3 col-lg-2">
          <option value="red">red</option>
          <option value="green">green</option>
          <option selected value="ping">ping</option>
          <option value="orange">orange</option>
        </select>
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" value={this.state.isCheck} onChange={this.handleChange} class="form-check-input"/>
            Check me out
          </label>
        </div>
        <button type="submit" className="btn btn-warning ml-2">Submit</button>
      </form>
    );
  }
}

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