javascript - 在状态值之间切换 - 切换功能

Question

在我的 React 应用程序中，我有一个功能组件并且想要在状态值之间切换。我的toggleNav功能似乎不起作用。isMenuOpen我正在尝试设置isMenuOpen不是，但我的语法似乎不正确。

我有以下代码：

const navBar = () => {

  //set initial state
  const [isMenuOpen] = useState(false);

  // toggle variable
  let toggleNav = () => {
    isMenuOpen = !isMenuOpen;
  }

  return (
    <button onClick={toggleNav}>Toggle</button>
  )

}

标签： javascriptreactjsstate

Answer 1

返回的第二个元素useState是 a setter。你不能只是改变状态。尝试这个：

const navBar = () => {

  //set initial state
  const [isMenuOpen, setMenuOpen] = useState(false);

  // toggle variable
  let toggleNav = () => {
    setMenuOpen(!isMenuOpen)
  }

  return (
    <button onClick={toggleNav}>Toggle</button>
  )

}

正如评论中指出的，toggleNav是不必要的：

const navBar = () => {

  //set initial state
  const [isMenuOpen, setMenuOpen] = useState(false);


  return (
    <button onClick={() => setMenuOpen(!isMenuOpen)}>Toggle</button>
  )

}