Forms trong React

Biểu mẫu (Form)?? Tên này quen thuộc với mọi lập trình viên, nhưng bạn đã bao giờ tự đặt câu hỏi về ý nghĩa cụ thể của nó và cách chúng ta có thể tích hợp chúng vào một ứng dụng React chưa?

Hôm nay, chúng ta sẽ cùng khám phá cách sử dụng biểu mẫu trong một ứng dụng React cơ bản.

React Form

Việc sử dụng forms trong React mang lại sự linh hoạt và tương tác cao hơn. Có hai cách xử lý forms trong React, chúng khác nhau chủ yếu trong cách quản lý dữ liệu:

• Nếu dữ liệu được xử lý bởi DOM, chúng ta gọi là uncontrolled components.
• Nếu dữ liệu được xử lý bởi components, chúng ta gọi chúng là controlled components.

Controlled components là những thành phần bạn thường xuyên sử dụng khi tương tác với React. Tuy nhiên, đôi khi cũng cần sử dụng uncontrolled components, ví dụ như <input type="file">.

Khi thay đổi trạng thái trên form được quản lý bởi các component, chúng ta sử dụng onChange:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }

  handleChange(event) {}

  render() {
    return (
      <form>
        Username:
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleChange}
        />
      </form>
    )
  }
}

Trong class components, để cập nhật trạng thái mới, chúng ta phải sử dụng this để bind tới phương thức handleChange:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }

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

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleChange}
        />
      </form>
    )
  }
}

Tương tự, chúng ta sử dụng onSubmit để submit dữ liệu khi form được gửi đi:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

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

  handleSubmit(event) {
    alert(this.state.username)
    event.preventDefault()
  }

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

Sử dụng validate trong form có thể được xử lý ngay bên trong hàm handleChange. Bạn có thể truy cập giá trị của state trước đó và sau khi người dùng tương tác trên DOM.

Dưới đây là một số ví dụ về các phần tử HTML khác của forms khi sử dụng trong React:

Textarea:

<textarea value={this.state.address} onChange={this.handleChange} />

Select tag:

<select value="{this.state.age}" onChange="{this.handleChange}">
  <option value="teen">Dưới 18</option>
  <option value="adult">18+</option>
</select>

Trên đây là giới thiệu về forms và cách sử dụng để validate trực tiếp dữ liệu trên DOM, cũng như cách submit data sử dụng forms trong React. Chúng tôi mong đợi nhận được ý kiến đóng góp từ mọi người.

Chủ yếu có hai loại đầu vào forms trong React:

1. Uncontrolled component
2. Controlled component

Controlled Component

Trong HTML, các phần tử form thường duy trì state của riêng chúng và cập nhật nó theo input của người dùng. Trong controlled component, phần tử Form input vào được xử lý bởi element thay vì DOM. Ở đây, state có thể thay đổi được giữ trong thuộc tính trạng thái và sẽ chỉ được cập nhật với phương thức setState ().

Các controlled component có các chức năng chi phối dữ liệu được truyền vào chúng trong mọi sự kiện onChange, thay vì chỉ lấy dữ liệu một lần, ví dụ: khi bạn nhấp vào nút gửi. Dữ liệu này sau đó được lưu về trạng thái và cập nhật bằng phương thức setState (). Điều này làm cho thành phần có quyền kiểm soát tốt hơn đối với các phần tử biểu mẫu và dữ liệu.

Controlled components nhận giá trị hiện tại của nó thông qua các props và notifies những thay đổi thông qua các lệnh gọi lại như sự kiện onChange. Thành phần parent “controls” điều này thay đổi bằng cách xử lý lệnh gọi lại và quản lý trạng thái của chính nó, sau đó chuyển các giá trị mới dưới dạng props cho thành phần được điều khiển. Nó còn được gọi là “dumb component.”.

Ví dụ:

import React, { Component } from 'react';  
class App extends React.Component {  
  constructor(props) {  
      super(props);  
      this.updateSubmit = this.updateSubmit.bind(this);  
      this.input = React.createRef();  
  }  
  updateSubmit(event) {  
      alert('You have entered the UserName and CompanyName successfully.');  
      event.preventDefault();  
  }  
  render() {  
    return (  
      <form onSubmit={this.updateSubmit}>  
        <h1>Uncontrolled Form Example</h1>  
        <label>Name:  
            <input type="text" ref={this.input} />  
        </label>  
        <label>  
            CompanyName:  
            <input type="text" ref={this.input} />  
        </label>  
        <input type="submit" value="Submit" />  
      </form>  
    );  
  }  
}  
export default App;  

Event.preventDefault() sẽ đảm bảo rằng form không bao giờ được gửi, và nó đã giành được quyền kiểm soát và ngăn chặn events đó khi click.

Uncontrolled Component

Uncontrolled component tương tự như các input form HTML truyền thống. Bản thân DOM xử lý dữ liệu biểu mẫu. Tại đây, các phần tử HTML duy trì trạng thái riêng của chúng sẽ được cập nhật khi giá trị đầu vào thay đổi. Để viết một Uncontrolled component, bạn cần sử dụng tham chiếu để nhận các giá trị biểu mẫu từ DOM. Nói cách khác, không cần phải viết một trình xử lý sự kiện cho mọi bản cập nhật trạng thái. Bạn có thể sử dụng một số tham chiếu để truy cập giá trị trường đầu vào của biểu mẫu từ DOM.

Ví dụ:

import React, { Component } from 'react';  
class App extends React.Component {  
  constructor(props) {  
      super(props);  
      this.state = {value: ''};  
      this.handleChange = this.handleChange.bind(this);  
      this.handleSubmit = this.handleSubmit.bind(this);  
  }  
  handleChange(event) {  
      this.setState({value: event.target.value});  
  }  
  handleSubmit(event) {  
      alert('You have submitted the input successfully: ' + this.state.value);  
      event.preventDefault();  
  }  
  render() {  
      return (  
          <form onSubmit={this.handleSubmit}>  
            <h1>Controlled Form Example</h1>  
            <label>  
                Name:  
                <input type="text" value={this.state.value} onChange={this.handleChange} />  
            </label>  
            <input type="submit" value="Submit" />  
         </form>  
      );  
  }  
}  
export default App;  

So sánh Controlled component và Uncontrolled component