Question

我试图找到一种通过按钮运行组件（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);

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

反应使用按钮激活组件

1 个答案: