Onclick css phản ứng

Ví dụ: hãy tạo một nút thích bên trong thành phần

function HomePage() {
  React.useState();
}

3 của bạn. Đầu tiên, thêm phần tử nút bên trong câu lệnh

function HomePage() {
  React.useState();
}

4

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    

      
      

        {names.map((name) => (
          
{name}
        ))}
      

      Like
    

  );
}

Lắng nghe sự kiện

Để làm cho nút thực hiện điều gì đó khi được nhấp, bạn có thể sử dụng sự kiện

function HomePage() {
  React.useState();
}

5

Trong React, tên sự kiện là camelCased. Sự kiện

function HomePage() {
  React.useState();
}

5 là một trong nhiều sự kiện khả thi mà bạn có thể sử dụng để phản hồi tương tác của người dùng. Ví dụ: bạn có thể sử dụng

function HomePage() {
  React.useState();
}

7 cho trường nhập liệu hoặc

function HomePage() {
  React.useState();
}

8 cho biểu mẫu

Xử lý sự kiện

Bạn có thể xác định một chức năng để "xử lý" các sự kiện bất cứ khi nào chúng được kích hoạt. Tạo một hàm trước câu lệnh trả về có tên là

function HomePage() {
  React.useState();
}

9

Sau đó, bạn có thể gọi hàm

function HomePage() {
  React.useState();
}

0 khi sự kiện

function HomePage() {
  React.useState();
}

5 được kích hoạt

Trạng thái và Móc

React có một tập hợp các chức năng được gọi là hook. Móc cho phép bạn thêm logic bổ sung, chẳng hạn như trạng thái vào các thành phần của mình. Bạn có thể coi trạng thái là bất kỳ thông tin nào trong giao diện người dùng thay đổi theo thời gian, thường được kích hoạt bởi tương tác của người dùng

Bạn có thể sử dụng trạng thái để lưu trữ và tăng số lần người dùng đã nhấp vào nút thích. Trên thực tế, đây là cái mà hook React để quản lý trạng thái được gọi là.

function HomePage() {
  React.useState();
}

2

function HomePage() {
  React.useState();
}

function HomePage() {
  React.useState();
}

2 trả về một mảng và bạn có thể truy cập cũng như sử dụng các giá trị mảng đó bên trong thành phần của mình bằng cách sử dụng tính năng hủy mảng

Mục đầu tiên trong mảng là trạng thái

function HomePage() {
  React.useState();
}

4, mà bạn có thể đặt tên bất kỳ. Nên đặt tên cho nó một cái gì đó mô tả

Mục thứ hai trong mảng là một hàm để

function HomePage() {
  React.useState();
}

5 giá trị. Bạn có thể đặt tên bất kỳ cho chức năng cập nhật, nhưng thông thường bạn sẽ thêm tiền tố là

function HomePage() {
  React.useState();
}

6 theo sau là tên của biến trạng thái mà bạn đang cập nhật

Bạn cũng có thể tận dụng cơ hội để thêm giá trị ban đầu của trạng thái

function HomePage() {
  React.useState();
}

7 của mình. số không

function HomePage() {
  const [likes, setLikes] = React.useState(0);
}

Sau đó, bạn có thể kiểm tra trạng thái ban đầu đang hoạt động bằng cách sử dụng biến trạng thái bên trong thành phần của mình

Cuối cùng, bạn có thể gọi hàm cập nhật trạng thái của mình,

function HomePage() {
  React.useState();
}

8 trong thành phần

function HomePage() {
  React.useState();
}

3 của bạn, hãy thêm nó vào bên trong hàm

function HomePage() {
  React.useState();
}

9 mà bạn đã xác định trước đó

Việc nhấp vào nút bây giờ sẽ gọi hàm

function HomePage() {
  React.useState();
}

0, gọi hàm cập nhật trạng thái

function HomePage() {
  React.useState();
}

8 với một đối số duy nhất là số lượt thích hiện tại + 1

Ghi chú. Không giống như các đạo cụ được truyền cho các thành phần dưới dạng tham số chức năng đầu tiên, trạng thái được bắt đầu và lưu trữ trong một thành phần. Bạn có thể truyền thông tin trạng thái cho các thành phần con dưới dạng đạo cụ, nhưng logic để cập nhật trạng thái phải được giữ trong thành phần nơi trạng thái được tạo ban đầu

Nhà nước quản lý

Đây chỉ là phần giới thiệu về trạng thái và bạn có thể tìm hiểu thêm về cách quản lý trạng thái và luồng dữ liệu trong các ứng dụng React của mình. Để tìm hiểu thêm, chúng tôi khuyên bạn nên xem qua phần Thêm tương tác và quản lý trạng thái trong Tài liệu phản ứng

Ví dụ

Thực thi JavaScript khi nhấp vào nút

Nhấp vào đây

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Sự kiện

function HomePage() {
  React.useState();
}

3 xảy ra khi người dùng nhấp vào một phần tử HTML

---

cú pháp

Trong JavaScript, sử dụng phương thức addEventListener()

vật. addEventListener("click", myScript);

Tự mình thử »

---

chi tiết kỹ thuật

Bong bóng. CóCó thể hủy. Có Loại sự kiện. MouseEventSupported
Thẻ HTML. Tất cả ngoại trừ. , ,
, , ,,,,Tự mình thử »

Một ví dụ khác về cách thay đổi màu của một phần tử

Nhấp vào tôi để thay đổi màu sắc của tôi

Tự mình thử »

Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác

Sao chép văn bản

function myFunction() {
  tài liệu. getElementById("trường2"). giá trị = tài liệu. getElementById("trường1"). giá trị;
}

Tự mình thử »

Cách gán sự kiện "onclick" cho đối tượng cửa sổ

cửa sổ. onclick = myFunction;

function myFunction() {
  tài liệu. getElementsByTagName("BODY")[0]. Phong cách. backgroundColor = "vàng";
}

Tự mình thử »

Sử dụng onclick để tạo danh sách thả xuống

tài liệu. getElementById("myBtn"). onclick = function() {myFunction()};

function myFunction() {
  tài liệu. getElementById("myDropdown"). danh sách lớp học. chuyển đổi ("hiển thị");
}

Tự mình thử »

---

Hỗ trợ trình duyệt

function HomePage() {
  React.useState();
}

3 là một tính năng DOM Cấp 2 (2001)

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11

Chúng tôi có thể sử dụng onClick trong CSS không?

OnClick có hoạt động trên div React không?

OnClick hoạt động như thế nào trong React?