如何在 React 中使用 useState 和 onClick 切换（多次更改）数据？

Question

反应中我有一些数据（“空框”）和一个按钮。当我点击一个按钮时，“空框”变为“满框”。接下来单击没有任何变化。（“满箱子”仍然存在）但我想切换它，每次点击都必须依次向我显示“空框”或“满框”。有人可以帮忙吗？

export default function App() {
  const [name, setName] = useState("empty boxes")
  const change = () => {
    setName("full boxes")
  }
  return (
   <main>
{name} 
<button onClick={change}>Change it!</button>
   </main>

  )
}

Answer 1

您应该通过 if

来控制您的活动

const change = () => {
if (name == "empty boxes")

  {setName("full boxes")}

else { setName("empty boxes")}

}

如何在 React 中使用 useState 和 onClick 切换（多次更改）数据？

How to toggle (change multiple times) data by using useState and onClick in React?

onclick

button

toggle

reactjs

use-state