ReactJS - 如何切換被點擊的按鈕？

Question

我是 React 的新手，我不知道用什么關鍵字來找到我的解決方案。 我有很多<button>並且只想切換被點擊的按鈕。 如何做到這一點？

這是我一直在嘗試的...

export default function App() {
  const [text, setText] = useState(false);
  const btnText = text ? 'Foo' : 'Bar';
  const handleClick = () => setText((prevState) => !prevState);

  return (
    <div className="App">
      <button type="button" onClick={handleClick}>{btnText}</button>
      <button type="button" onClick={handleClick}>{btnText}</button>
      <button type="button" onClick={handleClick}>{btnText}</button>
    </div>
  );
}

Answer 1

在每個按鈕上添加唯一的 id，您可以像這樣更改代碼：

export default function App() {
  const listOfButtons = [0, 1, 2];
  const [btnClicked, setBtnClicked] = useState([]);
  const handleClick = (id) => setBtnClicked({...btnClicked, [id]: !btnClicked[id]});

  return (
    <div className="App">
      {listOfButtons.map(id => (
        <button type="button" onClick={() => handleClick(id)}>{`${btnClicked[id] ? 'clicked' : 'not clicked'}`}</button>
      ))}
    </div>
  );
}

Answer 2

當您傳遞沒有括號的 function 時，您只是傳遞了定義。 在您的 onClick 中，像這樣調用您的 function：

onClick={()=>handleClick()}

如果您要調用 handleClick function 而它不在箭頭 function 內，那么您將得到一個無限循環。

onClick={handleClick()}

Answer 3

export default function App() {
  //each button needs its own state
  const [text, setText] = React.useState({
    button234423: false,
    button456645: false,
    button398375: false
  });

  //target button in state by element id
  const handleClick = e => {
    const id = e.target.id;
    setText(text => ({ ...text, [id]: !text[id] }));
  };

  //map state to return button element with key as id and value as conditional
  return (
    <div className="App">
      {Object.entries(text).map(([key, value]) => {
        return (
          <button type="button" key={key} id={key} onClick={handleClick}>
            {value ? "Foo" : "Bar"}
          </button>
        );
      })}
    </div>
  );
}

Answer 4

目前state共享給所有按鈕。 將其作為單獨的組件保存

import './App.css';

function App() {
  return (
    <div className="App">
      <Button />
      <Button />
      <Button />
    </div>
  );
}


export const Button = () => {
  const [text, setText] = useState(false);
  const btnText = text ? 'Foo' : 'Bar';
  const handleClick = () => setText((prevState) => !prevState);

  return <button type="button" onClick={handleClick}>{btnText}</button>
}

export default App;