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('Giá trị đã được submit: '
            + this.state.isGoing + ' và '
            + this.state.guestName
          );
          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>
                Ghi rõ họ tên:
                <input
                  name="guestName"
                  type="text"
                  value={this.state.guestName}
                  onChange={this.handleInputChange} />
              </label>
              <input type="submit" value="Submit" />
            </form>
          );
        };
      };

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