Реактив Активировать компонент с помощью кнопки - PullRequest
Новая
       5

Реактив Активировать компонент с помощью кнопки

0 голосов
/ 25 августа 2018

Я пытаюсь найти способ запуска компонента (FetchData), который представляет собой всплывающую сетку и API-интерфейс, через кнопку, поэтому при нажатии кнопки компонент визуализируется. Я не уверен, что делать здесь (новичок в JS). Я использую ящик для материалов 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);

1 Ответ

0 голосов
/ 25 августа 2018

Из вашего вопроса я понимаю, что вы хотите вызывать FetchData только при нажатии кнопки.Если это так, то вам нужно иметь логическое состояние, как показано ниже.Когда кнопка нажата, установите для этого логического значения значение true, используя setState, и вызывайте компонент FetchData только тогда, когда логическое значение равно true.Теперь вам также нужно сделать его ложным, чтобы он снова работал при повторном нажатии кнопки.Так что вы можете сделать это в обработчике событий закрытия ящика. 

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