React.js form kết hợp

React.js form kết hợp

  • Bài học này sẽ giúp các bạn biết cách kết hợp xử lý các thành phần trong <form>.

React form - 2 thành phần <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 = {
            isGoing: true,
            guestName: "Bùi Văn Tèo"
          };
        };

        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>
  • Ở phần constructor khai báo 2 giá trị đầu tiên của <input type="checkbox" /> và <input type="text" />.
  • Trong function handleInputChange xử lý giá trị true và false của <input type="checkbox" /> đồng thời lấy giá trị name của <input type="text" />.
  • Cũng trong function handleInputChange sử dụng setState để thực hiện cập nhật giá trị mới cho State.
  • Funciton handleSubmit giữ vai trò gọi 2 giá trị mới của <input type="checkbox" /> và <input type="text" />.

Trình duyệt hiển thị


Làm thử!

React form - Kết hợp nhiều thành phần

  • Tương tự như trên, dựa theo name và value ta có thể sử lý nhiều thành phần của <form> cùng lúc như sau.
<!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 = {
            isGoing: true,
            guestName: 'Bùi Văn Tèo',
            course: 'react.js',
            message: 'Your message here'
          };
        };

        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>
                Ghi rõ họ tên:
                <input
                  name="guestName"
                  type="text"
                  value={this.state.guestName}
                  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>

Trình duyệt hiển thị





Làm thử!

React.js xử lý form

React.js - xuất nội dung có điều kiện