如何更改反应中的按钮名称？

Question

我想要一个代码，当我点击按钮时改变按钮的名称，当我再次点击它时，它再次改变它以前的名称。

const [getName, setName] = useState(false);

        const handleNameChange = () => {
            setName(!getName); 
        }


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

Answer 1

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

    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 2

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

const [isActive, setIsActive] = useState(false);

const toggle = () => {
  setIsActive(!isActive); 
}

return (
  <button onClick={toggle}>
    {isActive ? 'Active' : 'Inactive'}
  </button>
);

不过我认为这应该可行。

Answer 3

您需要添加渲染功能。在这种情况下 return.

const [getName, setName] = useState(false);

const handleNameChange = () => {
   setName(!getName);
};

return (
   <button onClick={handleNameChange}>
     {getName ? "Inactive" : "active"}
   </button>
);

Answer 4

你可以这样一行完成。

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 5

您可以直接在按钮点击时使用setter功能。不需要做额外的功能。

const [getName, setName] = useState(false);

return (
    <button onClick={() => setName(!getName)}>
        {getName ? 'Active' : 'Inactive'}
    </button>
);

如何更改反应中的按钮名称？

How to change the button name in react?

reactjs

react-hooks

react-functional-component