Question

我是React的新手，并尝试根据状态变量加载不同的组件。我希望我的处理程序动态地知道我要更新哪个状态变量。到目前为止，我已经明确地将状态名称作为字符串传递。

状态变量

state = {
        showLogin: false,
        showHome: false
    }

处理程序方法

handleShow = (element) => this.setState({ element: true });

按钮

{
  !this.props.isAuthenticated ? (
    <Button
      variant="outline-primary"
      onClick={() => this.handleShow("showLogin")}
    >
      Login
    </Button>
  ) : (
    <>
      <Button
        variant="outline-primary"
        onClick={() => this.handleShow("showHome")}
      >
        Home
      </Button>
      <Button variant="outline-primary" onClick={this.authorizeUserMethod}>
        LogOut
      </Button>
    </>
  );
}

Answer 1

尝试

handleShow = element => this.setState({
    ...this.state, 
    [element]: true
});

Answer 2

在处理程序方法中，必须使用spread operator，这样您才能创建状态的副本，从而连接新值。

处理程序方法

handleShow = (element) => this.setState({ ...this.state, [element]: true });

单击更新状态变量以显示不同的组件

2 个答案: