Question

如何在单击自身时隐藏该“离子反应”按钮“提交”？

SparkConf().getAll()

Answer 1

您可以使用Hooks：useRef来附加按钮。然后，您可以做任何事情。例如，在这种情况下，将“ hidden”之类的属性设置为“ true”。

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>

Answer 2

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

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>

Answer 3

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

const isHidden = useState(false);

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

单击时隐藏离子反应按钮

3 个答案: