单击React按钮后隐藏该按钮

Question

我设置了一个问题清单，在其中我检查是否选中了其中一个复选框，我将显示第一个按钮。如果没有选中复选框；提交"；按钮当用户单击提交时，内部会显示一条消息。我还想为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>
}

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

Answer 2

检查此

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

你在那里写错了变量名，或者在这里写错了-showButton

我的意思是在showButton名称中检查字符小写问题。

Answer 3

谢谢你的回答，我用这些信息创建了播放/暂停按钮

const [playing, setPlaying] = useState(false);
const play = () => { 
if (playing == true){
// stop and start again
player.playbackManager.pause(); 
setPlaying(false);
}else{
// play 
player.playbackManager.play();
setPlaying(true);
}
};

return (
<div>
<div className="controller-bar"> 
<IonButton component="span" onClick={play}>

{playing ? ( <PlayArrow />  ) : (   <Pause/> )}
</IonButton> 
</div>
);
}