Reactjs 单击“隐藏离子反应”按钮

如何在单击自身时隐藏此按钮“提交”

    <IonButton
        size="large"
        color="primary"
        expand="full"
        onClick={() => {
          showOptionCardDisplay();
        }}
      >
        Submit
      </IonButton>

{
showOptionCardDisplay（）；
}}
>
提交

您可以使用下面的方法隐藏按钮，但我认为我使用了错误的方法

const showOptionCardDisplay = (() => {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  });

 <div id="myDIV">
  <IonButton
     size="large"
     color="primary"
     expand="full"
     onClick={() => {
      showOptionCardDisplay();
     }}>
     Submit
   </IonButton>
 </div>

const showOptionCardDisplay=（（）=>{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
});
{
showOptionCardDisplay（）；
}}>
提交

使用标志隐藏按钮。 例如：

const isHidden=useState（false）；
{ 
isShowBtn&&（
{setIsShowBtn（false）；}）
>
提交
)}

您可以使用Hooks:useRef连接按钮。然后你可以对它做任何事。例如，在本例中，将“hidden”之类的属性设置为“true”

const btnref=useRef（null）；
...
{setIsShowBtn（false）；btnref.current？.setAttribute（“隐藏”、“真”）；}
shape=“圆形”
>
提交

const isHidden = useState(false);

{ 
 isShowBtn && ( 
  <IonButton
   size="large"
   color="primary"
   expand="full"
   onClick={() => { setIsShowBtn(false); })
  >
   Submit
  </IonButton>
)}

const btnref = useRef<HTMLIonButtonElement>(null);

...

<IonButton
 size="large"
 color="primary"
 expand="full"
 ref={btnref}
 onClick={() => { setIsShowBtn(false); btnref.current?.setAttribute("hidden","true");}}
 shape="round"
 >
  Submit
</IonButton>