reactjs - 在 React 中来回单击按钮时更改状态？

Question

所以我知道如何在单击按钮时更改状态，但是当再次单击按钮时如何将新状态更改回之前的状态？

Answer 1

您只需切换状态即可。

这是使用组件的示例:

class ButtonExample extends React.Component {
  state = { status: false }

  render() {
    const { status } = this.state;
    return (
      <button onClick={() => this.setState({ status: !status })}>
        {`Current status: ${status ? 'on' : 'off'}`}
      </button>
    );
  }
}

这是一个使用 hooks 的示例(在 v16.8.0 中提供):

const ButtonExample = () => {
  const [status, setStatus] = useState(false);

  return (
    <button onClick={() => setStatus(!status)}>
      {`Current status: ${status ? 'on' : 'off'}`}
    </button>
  );
};

您可以将'on'和'off'更改为您想要切换的任何内容。希望这有帮助!