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'更改为想要切换的任何内容。希望这会有所帮助！

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" }

Answer 3

这将切换到上一个和新的值：

 constructor() {
        super();

      this.state = {
        inputValue: "0"
      }
    }

     render() {
     return (
     <div>
      <input
        type="button"
        name="someName"
        value={this.state.inputValue}
        onClick={() =>
         this.state.inputValue === "0"
         ? this.setState({
         inputValue: "1"
         })
         : 
        this.setState({
        inputValue: "0"
        })
        }
         className="btn btn-success"
      />
    </div>
     )
    }

说明：

如果当前值= 0，则将该值设置为1，反之亦然。

如果您有很多输入，这将很有用。因此，每个输入都有不同的状态或条件。

Answer 4

您必须保存以前的状态。您甚至可以将先前状态作为实际状态的一部分-但我将其保留为OP的练习（注意：您可以使用该技术保留先前状态的完整历史记录）。不幸的是，我还不能使用新的钩子功能从头顶上编写示例：

class MyComponent extends ReactComponent {
  prevState = {}
  state = {
    isActive: false,
    // other state here
  }

  handleClick = () => {
    // should probably use deep clone here
    const state = Object.assign({}, this.state);

    this.setState(state.isActive ? this.prevState : Object.assign(state, { 
      isActive: true,
      // other state here
    });

    this.prevState = state;
  }

  render() {
    return <button onClick={this.handleClick}>Toggle State</button>
  }
}

Answer 5

状态：

this.state = {toggleBtn: ""}

在您的按钮中：

<button key="btn1" onClick={() => this.clickhandler(btn1)}>
   {this.state.toggleBtn === ID? "-" : "+"}
</button>

在您的点击处理程序中：

clickhandler(ID) {

if (this.state.toggleBtn === ID) {
        this.setState({ toggleBtn: "" });
    } else {
        this.setState({ toggleBtn: ID});
    }

Answer 6

这是我使用React Hook而不使用useCallback（）进行切换显示的示例。
单击按钮时，它会显示“你好”，反之亦然。
希望有帮助。

const IsHiddenToggle = () => {
  const [isHidden, setIsHidden] = useState(false);

  return (
      <button onClick={() => setIsHidden(!isHidden)}>
      </button>
      {isHidden && <p>Hello</p>}
  );
};

每当在React中来回点击按钮时更改状态？

6 个答案: