如何在反应中更改按钮名称?

Question

我想要一个代码，当我单击按钮时，它会更改按钮的名称，当我再次单击它时，它会再次更改其先前的名称。

const [getName, setName] = useState(false);
const handleNameChange = () => {
setName(!getName); 
}

<button onClick={handleNameChange}>
{getName ? 'Inactive' : 'active'}
</button>

Answer 1

你可以像这样在一行中做到这一点。

import React, { useState } from "react";
function App() {
const [isActive, setIsActive] = useState(false);
return (
<button onClick={() => setIsActive(!isActive)}>
{isActive ? 'Active' : 'Inactive'}
</button>
);
}
export default App;

Answer 2

如果你像这样使用它，应该工作：

import React, { useState } from "react";
export const Button = () => {
const [getName, setName] = useState(false);
const handleNameChange = () => {
setName(!getName);
};
return (
<button onClick={handleNameChange}>
{getName ? "Inactive" : "active"}
</button>
);
};

Answer 3

我会重命名状态以更好地描述它正在做什么：

const [isActive, setIsActive] = useState(false);
const toggle = () => {
setIsActive(!isActive); 
}
return (
<button onClick={toggle}>
{isActive ? 'Active' : 'Inactive'}
</button>
);

我认为这应该有效。

Answer 4

你需要添加渲染函数。在这种情况下，返回。

const [getName, setName] = useState(false);
const handleNameChange = () => {
setName(!getName);
};
return (
<button onClick={handleNameChange}>
{getName ? "Inactive" : "active"}
</button>
);

Answer 5

您可以在单击按钮时直接使用setter功能。无需制作额外的功能。

const [getName, setName] = useState(false);
return (
<button onClick={() => setName(!getName)}>
{getName ? 'Active' : 'Inactive'}
</button>
);