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

<button onclick="activateLasers()">
  Activate Lasers
button>

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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 (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submitbutton>
    form>
  );
}

Ở đây,

<button onClick={activateLasers}>  Activate Lasers
button>

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<button onClick={activateLasers}>  Activate Lasers
button>

5 và chuyển nó cho

<button onClick={activateLasers}>  Activate Lasers
button>

6, thì

<button onClick={activateLasers}>  Activate Lasers
button>

4 sẽ là

<button onClick={activateLasers}>  Activate Lasers
button>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

1

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

4 tương ứng

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

<button onClick={activateLasers}>  Activate Lasers
button>

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

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submitbutton>
form>

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?