如何解决当我的智能合约被批准时如何更改按钮的颜色
我想在我的智能合约获得批准后将我的 (handleApprove) 按钮更改为绿色,但不知道如何设置条件来检查我的智能合约是否获得批准并将 (handleApprove) 按钮更改为绿色。我所有的 const 变量值都显示在我的 div 标签中,包括 (approvedContractAddress) 并且所有值都能够传递到我的模式框中。但是我如何做一个条件来检查我的合同是否被批准并将(handleApprove)按钮更改为绿色一旦被批准。我感谢你们,可以帮助我的情况。谢谢。
变量值
const [show,setShow] = useState(false);
const handleClose = () => setShow(false);
const [id,setId] = useState(null);
const [image,setimage] = useState(null);
const [name,setName] = useState(null);
const [description,setDescription] = useState(null);
const [owner,setowner] = useState(null);
const [approvedContractAddress,setApproveaddress] = useState(null);
const [changebackground,setChangeBackground] = useState(null);
function handleModal(id,image,name,description,owner,approvedContractAddress)
{
setId(id);
setimage(image);
setName(name);
setDescription(description);
setowner(owner);
setApproveaddress(approvedContractAddress);
if(approvedContractAddress === "0x123456789012345678901234567890");
{
setChangeBackground(changebackground);
}
setShow(true);
}
来自主页的 div 标签
<div className="grid grid-cols-2 gap-3 lg:grid-cols-3 ">
{mintednftState.data.map(
({ id,approvedContractAddress }) => {
return (
<div key={id} onClick={() => handleModal(id,approvedContractAddress)}>
<div className="border-1 border-solid rounded-t-lg xl:h-72 bg-gray-50 relative">
<div className="border-1 border-none ">
RoboCrypto
</div>
<img src={image} className="rounded-t-lg w-full xl:h-72" alt={name} />
<div className="w-auto border-2 border-none text-left">
{name}
</div>
</div>
<div className="border-r border-l border-b ">
<div className="border-1 border-none text-left ">{description}</div>
<div className="border-1 border-none text-right ">
<img className="float-left" src="https://img.icons8.com/nolan/30/ethereum.png" alt=""/>1
</div>
<div className="border-1 border-none text-left text-xs ">
<div className="text-left text-xs font-sans font-semibold">Owned By: </div>
<div className="font-myUbuntu font-semibold">{owner}</div>
<div className="font-myUbuntu pl-2 border-2 border-none border-black ">{approvedContractAddress}</div>
</div>
</div>
</div>
);
}
)
// data has load by set to array in mock data format using data.map will read without hardcoding
}
</div>
模态框打开
<Modal dialogClassName="modal-80w" show={show} onHide={handleClose}>
<div className="border-2 border-none border-yellow-500 ">
<div className="text-lg font-bold">Bio</div>
<p className="mb-2 text-sm">{description}</p>
<div className="text-sm"><div className="text-indigo-900 text-lg float-left mr-2">
Owner address:
</div>
<div className="border-2 border-solid border-transparent h-9 mt-2.5 float-right">
<div className="font-sans border-2 border-none float-right -mt-1">
<button onClick={() => handleApprove(id)} type="button" className="{changebackground ? 'bg-red-900' : 'bg-green-900'} ">
Approve
</button>
</div>
</div>
{owner}
</div>
</div>
</Modal>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。