React.js form

React.js form

  • Ta có thể sử dụng các thành phần của form trong trang HTML, tuy nhiên để tận dụng ưu điểm của React, cũng như có thể xử lý dễ dàng với dữ liệu, React chọn cách viết các thành phần form bên trong file Javascript, kỹ thuật này được gọi là "controlled component".
  • Các giá trị thay đổi trong form sẽ được giữ trong State của component, và được cập nhật thay đổi thông qua setState.
  • Ta lần lượt xem các ví dụ về <input />, <textarea>, <select><option>

React form - <input />

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</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>

    <script type="text/babel">
      class ActionButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {value: ''};
        };

        handleChange = (event) => {
          this.setState({value: event.target.value});
        };

        handleSubmit = (event) => {
          alert('Giá trị đã được submit: ' + this.state.value);
          event.preventDefault();
        };

        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                Name: 
                <input type="text" value={this.state.value} onChange={this.handleChange} />
              </label>
              <input type="submit" value="Submit" />
            </form>
          );
        };
      };

      ReactDOM.render(
        <ActionButton />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>
  • Ban đầu value của <input /> sẽ lấy giá trị khởi tạo của state là rỗng.
  • onChange={this.handleChange} sẽ sử dụng setState để lấy giá trị thay đổi của <input />.
  • Khi nhấn Submit sẽ kích hoạt onSubmit của <form>, khi này sẽ tiến hành xử lý function handleSubmit, là gọi một thông báo với giá trị vừa nhập.

Trình duyệt hiển thị

Làm thử!

React form - <textarea>

  • Cách xử lý cho <textarea> cũng tương tự cho <input />.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</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>

    <script type="text/babel">
      class ActionButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {value: 'Your message here'};
        };

        handleChange = (event) => {
          this.setState({value: event.target.value});
        };

        handleSubmit = (event) => {
          alert('Giá trị đã được submit: ' + this.state.value);
          event.preventDefault();
        };

        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                Message: 
                <textarea type="text" value={this.state.value} onChange={this.handleChange} />
              </label>
              <input type="submit" value="Submit" />
            </form>
          );
        };
      };

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

Trình duyệt hiển thị

Làm thử!

React form - <select><option>

  • Cách xử lý cho <select><option> có một điểm khác biệt hơn so với xử lý bên file HTML, đó là ta sẽ sử dụng thuộc tính value ngay tại <select>, việc này sẽ tiện lợi ở chỗ: State chỉ cần tương tác với một value của <select>.
  • Phần xử lý dữ liệu sẽ giống như xử lý cho <input />.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</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>

    <script type="text/babel">
      class ActionButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {value: 'javascript'};
        };

        handleChange = (event) => {
          this.setState({value: event.target.value});
        };

        handleSubmit = (event) => {
          alert('Giá trị đã được submit: ' + this.state.value);
          event.preventDefault();
        };

        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                Chọn khóa học: 
                <select value={this.state.value} onChange={this.handleChange}>
                  <option value="html">HTML</option>
                  <option value="css">CSS</option>
                  <option value="javascript">JAVASCRIPT</option>
                  <option value="react.js">REACT.JS</option>
                </select>
              </label>
              <input type="submit" value="Submit" />
            </form>
          );
        };
      };

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

Trình duyệt hiển thị

Làm thử!

React.js xử lý sự kiện

React.js xử lý form kết hợp