当我的智能合约被批准时如何更改按钮的颜色

问题描述

我想在我的智能合约获得批准后将我的 (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 (将#修改为@）