Html onclick cuộc gọi api

Xử lý các sự kiện với các phần tử React rất giống với việc xử lý các sự kiện trên các phần tử DOM. Có một số khác biệt về cú pháp

• Các sự kiện phản ứng được đặt tên bằng cách sử dụng camelCase, thay vì chữ thường
• Với JSX, bạn chuyển một hàm làm trình xử lý sự kiện, thay vì một chuỗi

Ví dụ, HTML

  Activate Lasers

hơi khác một chút trong React

  Activate Lasers

Một điểm khác biệt nữa là bạn không thể trả về

  Submit

5 để ngăn hành vi mặc định trong React. Bạn phải gọi

  Submit

6 một cách rõ ràng. Ví dụ: với HTML đơn giản, để ngăn hành vi gửi biểu mẫu mặc định, bạn có thể viết

  Submit

Trong React, thay vào đó, điều này có thể là

function Form[] {
  function handleSubmit[e] {
    e.preventDefault[];    console.log['You clicked submit.'];
  }

  return [
    
      Submit
    
  ];
}

Ở đây,

  Activate Lasers

0 là một sự kiện tổng hợp. React xác định các sự kiện tổng hợp này theo thông số kỹ thuật của W3C, vì vậy bạn không cần phải lo lắng về khả năng tương thích giữa các trình duyệt. Các sự kiện phản ứng không hoạt động chính xác như các sự kiện gốc. Xem hướng dẫn tham khảo

  Activate Lasers

1 để tìm hiểu thêm

Khi sử dụng React, bạn thường không cần gọi

  Activate Lasers

2 để thêm người nghe vào phần tử DOM sau khi nó được tạo. Thay vào đó, chỉ cần cung cấp một trình lắng nghe khi phần tử được hiển thị lần đầu

Khi bạn định nghĩa một thành phần bằng cách sử dụng một lớp ES6, một mẫu phổ biến là một trình xử lý sự kiện là một phương thức trên lớp. Ví dụ: thành phần

  Activate Lasers

3 này hiển thị một nút cho phép người dùng chuyển đổi giữa trạng thái “BẬT” và “TẮT”

________số 8

Dùng thử trên CodePen

Bạn phải cẩn thận về ý nghĩa của

  Activate Lasers

4 trong JSX callbacks. Trong JavaScript, các phương thức lớp không bị ràng buộc theo mặc định. Nếu bạn quên ràng buộc

  Activate Lasers

5 và chuyển nó cho

  Activate Lasers

6, thì

  Activate Lasers

4 sẽ là

  Activate Lasers

8 khi hàm thực sự được gọi

Đây không phải là hành vi dành riêng cho React; . Nói chung, nếu bạn đề cập đến một phương thức không có ____19 sau nó, chẳng hạn như ____20, thì bạn nên ràng buộc phương thức đó

Nếu cuộc gọi

  Submit

1 làm phiền bạn, có hai cách bạn có thể giải quyết vấn đề này. Bạn có thể sử dụng cú pháp trường lớp công khai để liên kết chính xác các cuộc gọi lại

  Activate Lasers

7

Cú pháp này được bật theo mặc định trong Tạo ứng dụng React

Nếu bạn không sử dụng cú pháp trường lớp, bạn có thể sử dụng hàm mũi tên trong hàm gọi lại

  Activate Lasers

8

Vấn đề với cú pháp này là một cuộc gọi lại khác được tạo ra mỗi khi

  Submit

2 hiển thị. Trong hầu hết các trường hợp, điều này là tốt. Tuy nhiên, nếu cuộc gọi lại này được chuyển dưới dạng chống đỡ cho các thành phần thấp hơn, thì các thành phần đó có thể thực hiện kết xuất lại thêm. Chúng tôi thường khuyên bạn nên liên kết trong hàm tạo hoặc sử dụng cú pháp trường lớp để tránh loại vấn đề về hiệu suất này

Truyền đối số cho Trình xử lý sự kiện

Trong một vòng lặp, thông thường muốn truyền thêm một tham số cho một trình xử lý sự kiện. Ví dụ: nếu

  Submit

3 là ID hàng, một trong hai cách sau sẽ hoạt động

  Submit

1

Hai dòng trên tương đương nhau và sử dụng các hàm mũi tên và

  Submit

4 tương ứng

Trong cả hai trường hợp, đối số

  Activate Lasers

0 đại diện cho sự kiện React sẽ được chuyển thành đối số thứ hai sau ID. Với hàm mũi tên, chúng ta phải chuyển nó một cách rõ ràng, nhưng với

  Submit

1, bất kỳ đối số nào khác sẽ tự động được chuyển tiếp

Làm cách nào để gọi API khi nhấp vào nút trong HTML?

Làm cách nào để gọi API trong HTML?

Làm cách nào để gọi API REST từ biểu mẫu HTML?

Làm cách nào để đạt được API trong JavaScript?