[英]hide/show ion-card element reactJS
我对 reactJS 和 Ionic 比较陌生,但我正在尝试使用 function 在隐藏/显示之间切换,并在按钮中调用 function,如下所示:
function myFunction(q1:string,q2:string) {
var x = document.getElementById(q1);
var y = document.getElementById(q2);
if(x !== null){
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
}
我收到错误,y object 可能是 null 但正在努力解决问题。 对应的html如下
<IonCard id="q1">
<IonCardHeader>
<IonCardSubtitle>Quiz 1</IonCardSubtitle>
<IonCardTitle>Question 1</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<IonImg src={require("../../Images/Hello.gif")}/>
<br></br>
<IonButton expand="full" >Goodbye</IonButton>
<br></br>
<IonButton expand="full" onClick={() =>myFunction("q1","q2")} >Hello</IonButton>
<br></br>
<IonButton expand="full" >Excuse Me</IonButton>
<br></br>
<IonButton expand="full" >Test</IonButton>
</IonCardContent>
</IonCard>
<IonCard id="q2">
<IonCardHeader>
<IonCardSubtitle>Quiz 1</IonCardSubtitle>
<IonCardTitle>Question 2</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<IonImg src={require("../../Images/Hello.gif")}/>
<br></br>
<IonButton expand="full" >Goodbye</IonButton>
<br></br>
<IonButton expand="full" >Hello</IonButton>
<br></br>
<IonButton expand="full" >test</IonButton>
<br></br>
<IonButton expand="full" >tester</IonButton>
</IonCardContent>
</IonCard>
任何帮助将不胜感激,谢谢!
你可以使用 useState 钩子来做到这一点:
const App = () => {
const [ showHide, setShowHide ] = useState(false);
const handleToggle = () => {
setShowHide(!showHide)
}
return (
<div>
{
showHide
? <p>
Start editing to see some magic happen :)
</p>
: <p>
New content
</p>
}
<button onClick={ handleToggle }>Toggle</button>
</div>
);
}
render(<App />, document.getElementById('root'));
看这个例子工作:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.