Question

我正在切换工具提示，我希望当this.state.open为true时显示工具提示，然后在this.state.open为false时消失。

我尝试了很多方法，包括prevState，调试和绑定。

这是代码

//this button is clicked
<Button variant="contained" color="primary" onClick={this.buttonClick}>
    {person.username}
</Button>

//this function fires
buttonClick = e => {
        this.setState({ buttonEl: e.target });
        //the this.state.open in the console.log below persistently stay false even after it has changed in the setState's callback below to true(the message from the console:'after state changed: true').
        console.log(this.state.open);
        function toggleState(state, props) {
            return { ...state, open: !this.state.open }; //here I toggle the state
        }
        this.setState(toggleState, () => console.log('after state changed: ', this.state.open));
    };

每次在buttonClick（）函数开始时测量this.state.open时，我都会得出错误的结论。

我希望第二次单击按钮并输入buttonClick函数时this.state.open为true，也希望工具提示消失。

Answer 1

您的代码不必要地复杂。据我了解，您希望根据单击按钮将open属性切换为true或false。而且您希望工具提示的可见性与此状态相关。

下面是一个简单的示例，其中通过单击按钮和工具提示来更改状态，该提示仅在open设置为true时显示：

const Tooltip = props => {
  return (
    <React.Fragment>
      <div
        hidden={!props.hidden}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "black",
          margin: "auto"
        }}
      />
    </React.Fragment>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }
  buttonClick = () => {
    this.setState(prevState => ({ open: !prevState.open }));
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.buttonClick}>Toggle</button>
        <p>{`this.state = { open: ${this.state.open} }`}</p>
        <Tooltip hidden={this.state.open} />
      </div>
    );
  }
}

Answer 2

您应该使用以下setState

变体

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

按照official documentation

这样，一旦以atomic的方式应用更改，就可以使用。希望这会有所帮助

使用setState后如何获取最新状态值？

2 个答案: