单击另一个组件中的按钮时，如何显示/隐藏React组件？

debugcn 发表于 Dev

卡罗琳

我有以下React组件：

export default class AdminHomePage extends Component {

  render() {
    return (
      <div>
        <NavBar />
        <OptionsMenu />
        <Form /> // needs to be inittially hidden 
        <ImportFile /> // needs to be inittially hidden 
        <Footer />
      </div>
    );
  }

}

在我的OptionsMenu组件中，我有两个按钮：

export default class OptionsMenu extends Component {

  render() {
    return (
      <div className="admin-menu">
        <div className="admin-menu-header">Select an option</div>
        <div className="buttons-admin-menu">

          <button className="button-admin">
            Register
          </button>

          <button className="button-admin" onClick={getFileModel}>
            Import CSV file
          </button>

        </div>
      </div>
    );
  }

}

首先，我需要同时隐藏Form和ImportFile组件，因此，当我单击OptionsMenu文件中的“ Import CSV”按钮时，将显示ImportFile组件，然后单击“ Register”按钮，我展示了Form组件。

我只找到了显示如何隐藏/显示在同一文件/类上具有各自按钮的组件的主题，因此我不知道如何处理不同类上的按钮和组件。

提前致谢。

沉默

您需要在父组件中创建一个记录状态（确定可见性的状态）的方法，并将该方法作为道具传递：

export default class AdminHomePage extends Component {

constructor(props) {
   super(props);

   this.state = {
      isVisible: false
   }
   this.isElVisible = this.isElVisible.bind(this);
}

isElVisible() {
   this.setState({isVisible: !isVisible});
}

render() {
 return (
  <div>
    <NavBar />
    <OptionsMenu isViz={this.isElVisible} />
    <Form /> // needs to be inittially hidden 
    { this.state.isVisible? <ImportFile /> : '' } // needs to be inittially hidden 
    <Footer />
  </div>
  );
  }

}

然后，调用props.isViz您的OptionsMenu组件，onClick或任何您希望其可见的位置。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。