Rate this post

Forms là một phần không thể thiếu của bất kỳ ứng dụng web hiện đại nào. Nó cho phép người dùng tương tác với ứng dụng cũng như thu thập thông tin từ người dùng. Forms có thể thực hiện nhiều tác vụ tùy thuộc vào bản chất của yêu cầu và logic kinh doanh của bạn, chẳng hạn như xác thực người dùng, thêm người dùng, tìm kiếm, lọc, đặt chỗ, đặt hàng

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

  1. Uncontrolled component
  2. Controlled component

Các bài viết liên quan:

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

ControlledUncontrolled
Nó không duy trì trạng thái bên trong của nó.Nó duy trì các trạng thái bên trong của nó.
Ở đây, dữ liệu được kiểm soát bởi thành phần mẹ.Ở đây, dữ liệu được kiểm soát bởi chính DOM.
Nó chấp nhận giá trị hiện tại của nó như một chỗ dựa.Nó sử dụng một giới thiệu cho các giá trị hiện tại của chúng.
Nó cho phép kiểm soát xác nhận.Nó không cho phép kiểm soát xác nhận.
Nó có quyền kiểm soát tốt hơn các phần tử forms và dữ liệu.Nó có quyền kiểm soát hạn chế đối với các phần tử forms và dữ liệu.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now