17. Form trong React JS

Sử dụng Form trong ReactJS là một phần quan trọng khi bạn cần thu thập thông tin từ người dùng, như tạo mới một bài viết, đăng ký tài khoản, hoặc tìm kiếm dữ liệu. Dưới đây là một ví dụ về cách bạn có thể sử dụng Form trong ReactJS:

jsx

import React, { Component } from 'react';

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
    };
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { username, email } = this.state;
    // Xử lý dữ liệu, ví dụ: gửi thông tin lên server
    console.log('Thông tin đã submit:', { username, email });
  }

  render() {
    return (
      <div>
        <h1>My Form</h1>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label htmlFor="username">Username:</label>
            <input
              type="text"
              id="username"
              name="username"
              value={this.state.username}
              onChange={this.handleChange}
            />
          </div>
          <div>
            <label htmlFor="email">Email:</label>
            <input
              type="email"
              id="email"
              name="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default MyForm;

Trong ví dụ trên, chúng ta đã tạo một component MyForm sử dụng React class component. Trong constructor, chúng ta khởi tạo state với các trường username và email.

Hàm handleChange được gọi mỗi khi giá trị của một trường input thay đổi. Hàm này sử dụng thuộc tính name của input để xác định trường cần cập nhật trong state.

Hàm handleSubmit được gọi khi người dùng nhấn nút “Submit”. Trong ví dụ này, chúng ta chỉ đơn giản là in ra thông tin đã submit trong console.

Cuối cùng, trong phần render, chúng ta xây dựng form với các trường input và nút “Submit”. Sự kiện onSubmit của form được liên kết với hàm handleSubmit.

Lưu ý rằng đây chỉ là một ví dụ cơ bản. Trong thực tế, bạn có thể cần thêm kiểm tra hợp lệ, xử lý lỗi, và tương tác với server để làm việc với dữ liệu trong các ứng dụng ReactJS phức tạp hơn. Trên đây là giới thiệu về cách sử dụng Form trong React JS.