三元运算在reactJS中的按钮单击上不起作用？答案

【问题标题】：Ternary operation not working on button click in reactJS?三元运算在reactJS中的按钮单击上不起作用？
【发布时间】：2021-12-15 15:10:15
【问题描述】：

我有条件地渲染一个按钮，所以当它被点击时，按钮会从播放变为暂停。我通过三元操作来做到这一点，但是，当按钮被点击时它不会改变。这是我的代码：

...
const isOn = true;
...

return(
...
{isOn ? (<Button className="icon" color="info" type="submit" onClick={startMe}><i className="playicon"/></Button>) : (<Button className="icon" color="info" type="submit" onClick={stopMe}><i className="pauseicon"/></Button>)}
...
)

我真的不明白为什么这不起作用。如果我手动将isOn 设置为false，按钮会发生变化，但如果我点击它不会。

【问题讨论】：

const isOn = true;是 const 那么如何将其值更改为 false？
这里不要使用let，而是调用useState:const [isOn, setIsOn] = useState(true);。

标签： javascript reactjs reactstrap

【解决方案1】：

您不能使用像const isOn = true; 这样的常规变量，因为它们不会导致重新渲染。你需要使用状态。

const [isOn, setIsOn] = useState(true); // set default to false if you want

const startMe = () => {
  setIsOn(true);
}

const stopMe = () => {
  setIsOn(false);
}

return(
<>
{isOn
  ? (<Button className="icon" color="info" type="submit" onClick={startMe}><i className="playicon"/></Button>)
  : (<Button className="icon" color="info" type="submit" onClick={stopMe}><i className="pauseicon"/></Button>)
}
</>
)

【讨论】：