javascript - NextJS 13 <button onClick={}> Bộ xử lý sự kiện không thể được truyền vào các props của Client Component

Lỗi: Không thể truyền các trình xử lý sự kiện vào các props của Thành phần Client. ^^^^^^^^^^Nếu bạn cần tính tương tác, hãy cân nhắc chuyển một phần của điều này thành Thành phần Client.

const reqHelp = () => {
    Swal.fire({
        title: '1',
        text: '1',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
    })
}

return(
        <div className="buttons">
            <button onClick={reqHelp} className="stopwatchButton">Request Help</button>
        </div>
);

Tìm kiếm Tài liệu chính thức NextJS 13 và về Render Server/Client

Câu trả lời #1

Thêm

'use client';

ở đầu tệp nơi bạn đang sử dụng handleClick vì tất cả các thành phần trong Next 13 theo mặc định là các thành phần máy chủ, do đó để tương tác phía khách hàng bạn cần sử dụng use client.

Câu trả lời #2

Các thành phần phía client có thể được nhập vào các thành phần phía server, nhưng không thể ngược lại, điều này cho phép chúng ta tạo các thành phần server hoặc client ở cấp độ thành phần.

Ví dụ, giả sử chúng ta có một đoạn mã gây lỗi như một nút trong thành phần máy chủ bất đồng bộ (async server component) ném lỗi do triển khai trình xử lý sự kiện onClick, chúng ta có thể tách nút đó thành thành phần khách (client component) riêng bằng cách thêm chú thích "use client" ở dòng đầu tiên của thành phần nút mới, như vậy chúng ta vẫn có thể sử dụng await trong thành phần máy chủ bất đồng bộ của mình và sau đó nhập nút đó như một thành phần khách.

Đọc thêm về cách soạn thảo các thành phần client và server