reactjs - 如何检查/更改 React 按钮中的文本？

Question

我有一个反应按钮，我想根据已经显示的文本更改文本。如何使用条件语句来做到这一点？

我有以下代码设置：

buttonClicked() {

}

create() {
  return (
    <button>X</button>
  );
}

抱歉，如果这真的很简单，我搜索了它并找不到任何东西，而且我对 React 很陌生。

标签： reactjsreact-nativebuttonrxjsconditional-statements

Answer 1

useState 在反应中，然后是当前值的开关

export default function App() {
  const [buttonText, setButtonText] = useState("My Button");

  handleClick = () => {
    switch (buttonText) {
      case "My Button":
        setButtonText("My Button 1");
        break;
      case "My Button 1":
        setButtonText("My Button 2");
        break;
      case "My Button 2":
        setButtonText("Whoops");
        break;
      default:
        setButtonText("My Button");
        break;
    }
  };
  return (
    <div className="App">
      <button onClick={() => handleClick()}>{buttonText}</button>
    </div>
  );
}