[英]Toggling Between State Value - Toggle Function
In my React App, I have a functional component and wanted to toggle between a state's value. 在我的React App中,我有一个功能组件,想在状态值之间切换。 My
toggleNav
function doesn't seem to working. 我的
toggleNav
函数似乎无法正常工作。 I'm trying to set isMenuOpen
to what isMenuOpen
is not but my syntax seems to be incorrect. 我试图将
isMenuOpen
设置为isMenuOpen
不是,但是我的语法似乎不正确。
I have the following code: 我有以下代码:
const navBar = () => {
//set initial state
const [isMenuOpen] = useState(false);
// toggle variable
let toggleNav = () => {
isMenuOpen = !isMenuOpen;
}
return (
<button onClick={toggleNav}>Toggle</button>
)
}
The second element returned by useState
is a setter
. useState
返回的第二个元素是setter
。 You can't just mutate the state. 您不能仅仅改变状态。 Try this:
尝试这个:
const navBar = () => {
//set initial state
const [isMenuOpen, setMenuOpen] = useState(false);
// toggle variable
let toggleNav = () => {
setMenuOpen(!isMenuOpen)
}
return (
<button onClick={toggleNav}>Toggle</button>
)
}
As pointed out in comments, toggleNav
is unecessary: 如评论中所指出的,
toggleNav
是不必要的:
const navBar = () => {
//set initial state
const [isMenuOpen, setMenuOpen] = useState(false);
return (
<button onClick={() => setMenuOpen(!isMenuOpen)}>Toggle</button>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.