单击后隐藏 React 按钮答案

【问题标题】：Hide React button after it is clicked单击后隐藏 React 按钮
【发布时间】：2021-01-23 05:18:31
【问题描述】：

我有一个问题清单，我在其中检查是否选中了一个复选框，我将显示第一个按钮。如果没有选中复选框，我会显示第二个“提交”按钮。当用户单击提交时，里面会显示一条消息。我还想为 UI 做的是，此时不必在功能上提交，但如果它确实是在按钮显示后立即隐藏实际的提交按钮，那就太好了。

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

判断是否应显示默认提交按钮或第二个继续按钮的逻辑：

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>
}

【问题讨论】：

代码看起来不错，什么不工作？
@Itamar 代码没问题，它是单击后提交按钮的附加隐藏。否则，代码工作正常。所以我想在点击后隐藏提交按钮。

标签： reactjs typescript ionic-framework

【解决方案1】：

我了解您的期望，如果至少有一个选中的复选框（您的答案中有一个 true），您希望显示您的 Contiunue 按钮。

虽然实现这一点，但很容易：

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>
)}

编辑

根据您的评论，如果提交按钮已被点击，您也想隐藏它。

下一个解决方案将显示第二个按钮的逻辑分开，并将其设置为showOptionCardDisplay中的false。所以基本上你可以用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}

【讨论】：

代码没问题，点击后提交按钮的附加隐藏。我只是不知道根据它的设置方式在哪里添加该条件。 IE。单击提交会显示消息并隐藏提交按钮。用户不应再看到提交按钮
根据您的评论，我已经编辑了我的答案，如果这能解决您的问题，请告诉我。

【解决方案2】：

检查一下

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

您在那里写错了设置变量名或在此处写错 - showButton ?

我的意思是检查显示按钮名称中的字符小写问题。

【讨论】：