Reactjs If Else最大数量答案

【问题标题】：Reactjs If Else for maximum numberReactjs If Else最大数量
【发布时间】：2022-11-19 20:53:49
【问题描述】：

我试图弄清楚如何在反应中使用条件渲染 - 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>

任何帮助确实有帮助，我不确定如何将该要求添加到函数中。

【问题讨论】：

第一个结束标记 </div> 是打字错误吗？好像应该是<div>。

标签： reactjs function button react-hooks

【解决方案1】：

你可以尝试这样的事情：

<div>
  <h1>Kaufland</h1>
  <p style={{ color: count > 5 ? "red" : undefined }}>Customers {count}</p>
  <Uu5Elements.Button
    class="btn2"
    onClick={count > 5 ? undefined : addCount}
  >
    +1
  </Uu5Elements.Button>
</div>

【讨论】：

【解决方案2】：

您可以使用 && 条件来禁用按钮并更改 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>

【讨论】：