React - 在点击时改变按钮文本的方法

在本教程中，我们将学习如何在React中改变一个按钮的点击文本。

考虑一下，我们的react应用中有以下组件。

import React from 'react';

function Home(){
    return (
        <div className="container">
          <button>SignUp</button>
        </div>
    )
}

export default Home;

要在React中改变按钮的文本，可以给它添加onClick事件处理程序，并在按钮被点击时有条件地改变其文本。

下面是一个例子。

import React, { useState } from "react";

function Home() {
  const [active, setActive] = useState(false);
  const handleClick = () => {
    setActive(!active);
  };

  return (
    <div className="container">
      <button onClick={handleClick}>
         { active ? "Logout" : "Login"}
      </button>
    </div>
  );
}

export default Home;

在上面的例子中，我们给onClick 道具添加了一个handleClick 事件处理程序，给按钮文本添加了active 状态，所以每当按钮被点击时，就会运行handleClick 函数，将active 状态从false 改为true ，反之亦然。

基于active 状态，我们使用三元组表达式改变按钮文本。

{ active ? "Logout" : "Login"}

如果激活的是false ，它就会选择Login 的文本，如果它是真的，它就会选择Logout 的文本。