Как мне проверить / изменить текст в кнопке React?

Question

У меня есть кнопка реакции, и я хочу изменить текст в зависимости от того, какой текст уже отображается. Как я могу сделать это с помощью условного оператора?

У меня есть следующая настройка кода:

buttonClicked() {

}

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

Извините, если это действительно просто, я искал его и ничего не нашел, и я новичок в React.

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>
  );
}

Answer 2

Вы можете проверить текст кнопки, используя JS QuerySelector.

buttonClicked() {
  const btn = document.querySelector("#myButton"); // get button elm by id
  const text = btn.textContent || btn.innerText; // get button text (the prop is browser-dependant)

  // change button text based on condition
  if (text === 'X') btn.innerHTML = 'button has X value';
  else btn.innerHTML = 'button has another value';
}

create() {
  return (
    <button id="myButton">X</button>
  );
}