Question

我设置了一个问题清单，在其中检查是否选中了一个复选框，我将显示第一个按钮。如果未选中任何复选框，则显示第二个“提交”按钮。当用户单击提交时，其中会显示一条消息。我还想对UI进行操作，此时不必在功能上进行提交，但如果这样做的话，那就是最好的方法是在按钮显示后立即隐藏实际的Submit按钮。

因此，一旦单击“提交”按钮，我希望它从屏幕上消失。

查看默认的提交按钮或第二个继续按钮的逻辑：

const decideIfButtonShouldBeShown = (checked) => {
  const answeredQuestion = data.questions.some(
    (q) => q.answer === true
  );
  if (answeredQuestion)
    setShowButton(true);
  else
    setShowButton(false);
}


const showOptionCardDisplay = () => {
  setShowOption(logic.displayOption(data));
};

这是按钮：

{
  showButton ?
    <IonButton
      size="large"
      color="secondary"
      expand="full"
      routerLink={'/newpage'}>
      Contiunue
              <IonIcon slot="end" icon={arrowForward} />
    </IonButton>
    :
    <IonButton
      size="large"
      color="primary"
      expand="full"
      onClick={() => {
        showOptionCardDisplay();
      }}
    >
      Submit
    </IonButton>
}

Answer 1

据我所知，如果您至少有一个选中的复选框（答案中有一个Contiunue），您想显示true按钮。

要实现这一目标，将非常简单：

const showButton = data.questions.some((q) => q.answer);

{showButton ? (
    <IonButton
        size="large"
        color="secondary"
        expand="full"
        routerLink={'/newpage'}
    >
        Contiunue
        <IonIcon slot="end" icon={arrowForward} />
     </IonButton>
    ) : (
    <IonButton
        size="large"
        color="primary"
        expand="full"
        onClick={() => showOptionCardDisplay()}
     >
        Submit
    </IonButton>
)}

编辑

根据您的评论，您也想隐藏“提交”按钮（如果已单击）。

下一个解决方案是将显示第二个按钮的逻辑分开，并在false中将其设置为showOptionCardDisplay。因此，基本上，您可以使用decideIfButtonShouldBeShown控制第一个按钮的可见性，如果第一个按钮不可见，则可以有条件地显示第二个按钮。

const [showSubmitButton, setShowSubmitButton] = useState(true);
const [showButton, setShowButton] = useState(false);

const decideIfButtonShouldBeShown = (checked) => {
    const answeredQuestion = data.questions.some((q) => q.answer);

    if(answeredQuestion) {
      setShowButton(true);
    } else {
      setShowButton(false);
    }
}

const showOptionCardDisplay = () => {
  setShowOption(logic.displayOption(data));
  setShowSubmitButton(false);
};

{showButton ? (
    <IonButton
        size="large"
        color="secondary"
        expand="full"
        routerLink={'/newpage'}
    >
        Contiunue
        <IonIcon slot="end" icon={arrowForward} />
     </IonButton>
) : null}

{!showButton && showSubmitButton ? (
    <IonButton
        size="large"
        color="primary"
        expand="full"
        onClick={() => showOptionCardDisplay()}
     >
        Submit
    </IonButton>
) : null}

Answer 2

检查此

if(answeredQuestion )
      setshowButton(true);
    else
      setshowButton(false);

您在此处写错了设置变量名称，或者在这里写错了- showButton吗？

我的意思是showButton名称中的校验字符小写问题。

单击后隐藏“隐藏”按钮

2 个答案: