我是新來的。我有一個任務問題。我想要一個按鈕，如果你按下它會隱藏一些內容，在這種情況下是一個字串。如果內容被隱藏，則按鈕必須更改其中的文本，并且必須說“顯示”，而不是隱藏它，而是顯示以前隱藏的內容。如果內容已顯示，則按鈕文本將為“隱藏”。我不明白如何使用 if 陳述句
...
import React { useState } from "react";
function App() {
const [hideText, setHideText] = useState(false);
const onClick = () => setHideText(false);
return (
<div>
<button onClick={onClick}>Click me</button>
{hideText ? <Text /> : null}
</div>
);
}
const Text = () => <div>I will disappear, true Magic</div>;
export default App;
...
uj5u.com熱心網友回復：
我不知道我是否正確理解了您的需求。我將變數名稱更改為更有意義:) 現在按鈕顯示Hide文本何時可見以及Show何時隱藏。單擊按鈕更改狀態。
import React { useState } from "react";
function App() {
const [isTextHidden, setTextHidden] = useState(true);
const onClick = () => setTextHidden(!isTextHidden);
return (
<div>
<button onClick={onClick}>{isTextHidden ? 'Show' : 'Hide'}</button>
{!textHidden ? <Text /> : null}
</div>
);
}
const Text = () => <div>I will disappear, true Magic</div>;
export default App;
uj5u.com熱心網友回復：
import React { useState } from "react";
function App() {
const [isVisible, setVisible] = useState(true);
const onClick = () => setVisible(!isVisible);
return (
<div>
<button onClick={onClick}>{isVisible? 'Hide' : 'Show'}</button>
{isVisible? <Text /> : null}
</div>
);
}
const Text = () => <div>I will disappear, true Magic</div>;
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462530.html
標籤：javascript 反应 按钮 显示隐藏
上一篇：無法弄清楚如何使按鈕更改陣列編號