Làm thử React form - multi element | Hướng dẫn học React.js

↔

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React form multi element</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

handleInputChange = (event) => {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;

this.setState({
            [name]: value
          });
        };

handleSubmit = (event) => {
          alert('Tham gia: '
            + this.state.isGoing + ', họ tên: '
            + this.state.guestName + ', '
            + this.state.course + ' và '
            + this.state.message
          );
          event.preventDefault();
        };

render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                Tham gia:
                <input
                  name="isGoing"
                  type="checkbox"
                  checked={this.state.isGoing}
                  onChange={this.handleInputChange} />
              </label>
              <br />

<label>
                Chọn khóa học: 
                <select
                  name="course"
                  value={this.state.course}
                  onChange={this.handleInputChange}
                >
                  <option value="html">HTML</option>
                  <option value="css">CSS</option>
                  <option value="javascript">JAVASCRIPT</option>
                  <option value="react.js">REACT.JS</option>
                </select>
              </label>
              <br />

<label>
                Message: 
                <textarea
                  name="message"
                  type="text"
                  value={this.state.message}
                  onChange={this.handleInputChange}
                />
              </label>
              <br />

<input type="submit" value="Submit" />
            </form>
          );
        };
      };

ReactDOM.render(
        <ActionButton />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>