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

【问题标题】：How to show/hide React components when clicking on a button that is in another component?单击另一个组件中的按钮时如何显示/隐藏 React 组件？
【发布时间】：2020-08-19 21:13:04
【问题描述】：

我有以下 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 组件，所以当我点击 内部的“导入 CSV”按钮时OptionsMenu 文件，我展示了 ImportFile 组件，当我点击“注册”按钮时，我展示了 Form 组件。

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

提前致谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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>
  );
  }

}

然后，在您的 OptionsMenu 组件中调用 props.isViz，onClick 或任何您希望它可见的时候。

【讨论】：

代码编译失败。它说：'isVisible' 未定义 - 行 this.setState({ isVisible: !isVisible });
@Caroline 这只是一个错字。。您所要做的就是将this.isVisible = this.isVisible.bind(this); 更改为this.isElVisible = this.isElVisible.bind(this); 无论如何，您的解决方案基本上正是我提出的...如果您的实施不是完全一样，在这里仍然被认为是一个有效的答案。
谢谢，@silencedogood。你帮了我很多，我会接受你的回答。

【解决方案2】：

我能够解决创建函数的问题，然后将该函数作为道具发送到 OptionsMenu 组件（类似于@silencedogood 所说的，但他的回答存在一些问题）。

组件AdminHomePage：

export default class AdminHomePage extends Component {
  constructor(props) {
    super(props);
    this.handleFormClick = this.handleFormClick.bind(this);
    this.handleImportClick = this.handleImportClick.bind(this);
    this.state = {
      formVisible: false,
      importVisible: false,
    };
  }

  handleFormClick() {
    this.setState({
      formVisible: true,
      importVisible: false,
    });
  }

  handleImportClick() {
    this.setState({
      formVisible: false,
      importVisible: true,
    });
  }

  render() {
    return (
      <div>
        <NavBar
          keycloak={this.props.keycloak}
          name={this.props.name}
          email={this.props.email}
        />
        <OptionsMenu
          showForm={this.handleFormClick}
          showImport={this.handleImportClick}
        />
        {this.state.formVisible ? <Form /> : null}
        {this.state.importVisible ? <HomePage /> : null}
        <Footer />
      </div>
    );
  }
}

在组件AdminHomePage中调用函数：

export default class OptionsMenu extends Component {
  render() {
    return (
      <div className="admin-menu">
        <div className="admin-menu-header">Selecione uma opção</div>
        <div className="buttons-admin-menu">
          <button
            className="button-admin"
            onClick={() => this.props.showForm()}
          >
            Register
          </button>
          <button
            className="button-admin"
            onClick={() => {
              this.props.showImport();
              getFileModelo();
            }}
          >
            Import CSV file
          </button>
        </div>
      </div>
    );
  }
}

【讨论】：