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

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({&nbsp; &nbsp; ...this.state,&nbsp;&nbsp; &nbsp; [element]: true});

Answer 2

在您的处理程序方法中，您必须使用扩展运算符，这允许您创建状态的克隆，从而连接一个新值。处理方法handleShow&nbsp;=&nbsp;(element)&nbsp;=>&nbsp;this.setState({&nbsp;...this.state,&nbsp;[element]:&nbsp;true&nbsp;});