我試圖弄清楚如何在反應中使用條件渲染 - if else 陳述句但我很掙扎，我需要按鈕，它只有增量，停止添加超過某個數字的數字，比如說 5，然后用紅色突出顯示數字。
我已經宣告了函式并將其命名為 onClick，還宣告了 consts，這就是我作為基礎組件所擁有的：
const [count, setCount] = useState(0);
function addCount() {
setCount(prevCount => prevCount 1)
}
</div>
<h1>Kaufland</h1>
<p>Customers {count}</p>
<Uu5Elements.Button class="btn2" onClick={addCount}> 1</Uu5Elements.Button>
</div>
任何幫助確實有幫助，我不確定如何將該要求添加到函式中。
uj5u.com熱心網友回復：
你可以嘗試這樣的事情：
<div>
<h1>Kaufland</h1>
<p style={{ color: count === 5 ? "red" : undefined }}>Customers {count}</p>
<Uu5Elements.Button
class="btn2"
disabled={count === 5}
onClick={addCount}
>
1
</Uu5Elements.Button>
</div>
uj5u.com熱心網友回復：
您可以使用&&條件來禁用按鈕并更改p標簽的樣式。
// Get a hook function
const {useState} = React;
const Example = () => {
const [count, setCount] = useState(0);
function addCount() {
setCount((prevCount) => prevCount 1);
}
return (
<div className="App">
<h1>Kaufland</h1>
<p style={{color: count>5 && "red"}}>Customers {count}</p>
<button className="btn2" onClick={addCount} disabled={count>5}> 1</button>
</div>
);
};
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example title="Example using Hooks:" />
);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/536701.html
標籤：反应功能按钮反应挂钩
上一篇：從按鈕中反應數值的Suma