React 使用按钮激活组件答案

【问题标题】：React Activate a Component using a buttonReact 使用按钮激活组件
【发布时间】：2018-08-26 08:19:13
【问题描述】：

我试图找到一种通过按钮运行组件 (FetchData) 的方法，该组件是一个弹出网格和一个 API 拉取，因此当我单击该按钮时，组件会呈现。我不确定在这里做什么（JS 新手）。我正在使用 Material UI 抽屉。我在这里缺少什么吗？

class MiniDrawer extends React.Component {
  state = {
    open: false,
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };


  render() {
    const { classes, theme } = this.props;

    return (
      //main part of where help is needed
        <main className={classes.content}>
          <div className={classes.toolbar} />

          <Button onClick={this.handleClick}>{'Get Devices'}</Button>
          <FetchData />

        </main>
      </div>
    );
  }
}

MiniDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(MiniDrawer);

【问题讨论】：

您的按钮 onClick 事件处理程序在哪里，您想仅在单击按钮时调用 FetchData 是您的查询吗？
Show or hide element in React的可能重复

标签： reactjs material-ui

【解决方案1】：

根据您的问题，我了解到您只想在单击按钮时调用 FetchData。如果是这样，那么您需要有一个布尔值，如下所示。单击按钮时，然后使用 setState 将该布尔值设置为 true 并仅在布尔值为 true 时调用 FetchData 组件。现在，您还需要将其设置为 false，以便在第二次单击该按钮时它再次工作。所以你可以在抽屉关闭事件处理程序中做到这一点。

class MiniDrawer extends React.Component {
  state = {
    open: false,
    callFetchData: false
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false, callFetchData: false });
  };

  handleClick = () => {
    this.setState({
      callFetchData: true
    });
  }
  render() {
    const { classes, theme } = this.props;
    const { callFetchData } = this.state;
    return (
      //main part of where help is needed
        <main className={classes.content}>
          <div className={classes.toolbar} />

          <Button onClick={this.handleClick}>{'Get Devices'}</Button>
          {callFetchData && <FetchData />}

        </main>
      </div>
    );
  }
}

MiniDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(MiniDrawer);

【讨论】：