我在我的反應應用程式中實作了一個模式，但遇到了奇怪的錯誤，Error: Expected `onClick` listener to be a function, instead got a value of `object` type.. 這里令人困惑的是，我已經使用相同的邏輯在應用程式的另一部分中實作了模態并且它不會產生這樣的錯誤。
以下是代碼的重要片段。
index.js
import React, { useState } from "react";
import ProfileSave from "../../components/modal/profileSave";
const test = () => {
const [saveModal, setSaveModal] = useState(false);
const [save, setSave] = useState(false);
return (
<>
<button className="w-[165px] h-[60px] text-center px-4 py-2 text-sm text-white bg-[#3A76BF] rounded-md font-bold text-[16px]" onClick={saveShowModal}>
Save
</button>
{saveModal && (
<ProfileSave
open={saveModal}
handleClose={() => setSaveModal(!saveModal)}
handleSave={handleSave}
/>
)}
</>
export default test
profileSave.js
import React from "react";
const ProfileSave = (open, handleClose, handleModal) => {
return open ? (
<div className="fixed inset-0 z-10 overflow-y-auto">
<div
className="fixed inset-0 w-full h-full bg-black opacity-40"
onClick={handleClose}
></div>
</div>
) : (
""
);
};
export default ProfileSave;
uj5u.com熱心網友回復：
您需要提取組件接收的道具
試試這個 ：
import React from "react";
const ProfileSave = ({open, handleClose, handleModal}) => {
return open ? (
<div className="fixed inset-0 z-10 overflow-y-auto">
<div
className="fixed inset-0 w-full h-full bg-black opacity-40"
onClick={handleClose}
></div>
</div>
) : (
""
);
};
export default ProfileSave;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/476385.html
標籤：javascript 反应 点击 事件处理