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

这是一个使用钩子的例子（在 v16.8.0 中可用）：

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

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

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

Answer 2

考虑这个例子： https: //jsfiddle.net/shanabus/mkv8heu6/6/

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	buttonState: true
    }
    this.toggleState = this.toggleState.bind(this)
  }
  
  render() {
    return (
      <div>
      <h2>Button Toggle: {this.state.buttonState.toString()}</h2>                
        <button onClick={this.toggleState}>Toggle State</button>
      </div>
    )
  }
  
  toggleState() {
  	this.setState({ buttonState: !this.state.buttonState })
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

这里我们使用布尔值 true/false 并在两种状态之间翻转。如果您希望使用其他一些自定义数据作为之前的状态，只需为此创建一个不同的变量即可。

例如：

this.state = { previousValue: "test", currentValue: "new thing" }