NodeJS React仅在按钮被点击两次时才改变状态

3hvapo4f  于 2023-08-04  发布在  Node.js
关注(0)|答案(2)|浏览(139)

我是react的初学者,当我使用useState更改按钮的名称时,它并不像预期的那样工作。具体而言:当我按下按钮时,它的名称“未单击”必须更改为“已单击”,当我再次按下它时,它应该更改回“未单击”等等。在现实中,当我点击按钮时,它一次点击就会变成“点击”,但要改回来,按钮必须按两次。


的数据



好吧,我希望按钮更改它的名称,只有一个点击。

js4nwp54

js4nwp541#

错误地使用了clicked变量。每次组件重新渲染时,它将重置为0。
改为

if(buttonName === 'Unclicked')
...

字符串

m3eecexj

m3eecexj2#

你应该改变你的代码如下!

const Test = () => {
const [buttonName, setButtonName] = useState("Unclicked");

return (
    <div>
        <h1>Test</h1>
        <Button onClick={() => {buttonName == "Unclicked" ? setButtonName("Clicked") : setButtonName("Unclicked")}} variant="contained">
            {buttonName}
        </Button>
    </div>
)

字符串
}

相关问题