ReactJS Вызов функции в рендере после действия - PullRequest
Новая
       30

ReactJS Вызов функции в рендере после действия

0 голосов
/ 17 сентября 2018

Я использую ReactJS и делаю шоппинг поляриса для создания веб-сайта. Я очень новичок, чтобы реагировать, так что это может быть вопрос новичка, но я просмотрел интернет и не смог собрать все воедино.

У меня есть раскрывающийся список, и в основном, когда пользователь нажимает на элемент из списка, я хочу добавить кнопку рядом с раскрывающимся списком. Вот мой код: 

import React from "react";
import { ActionList, Button, List, Popover } from "@shopify/polaris";

export default class ActionListExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
      title: "Set Period",
    };
  }

renderButton() {
    console.log("Button clicked")
    return (
      <div>
        <Button fullWidth={true}>Add product</Button>;
      </div>
    );
 }

togglePopover = () => {
this.setState(({ active }) => {
  return { active: !active };
});
};

render() {
  const activator = (
    <Button onClick={this.togglePopover}>{this.state.title}</Button>
  );
return (
  <div style={{ height: "250px" }}>
    <Popover
      active={this.state.active}
      activator={activator}
      onClose={this.togglePopover}
    >
      <ActionList
        items={[
          {
            content: "One",
            onAction: () => {
              this.setState({ title: "One" }, function() {
                this.togglePopover();
                this.renderButton() //THIS IS WHERE I CALL THE METHOD
              });
            }
          }
        ]}
      />
    </Popover>
  </div>
);
}
}

Я поместил комментарий в код, чтобы показать, где я вызываю метод renderButton (). Всякий раз, когда я щелкаю элемент «Один» в раскрывающемся списке, он печатает «Нажатие кнопки», но на экран ничего не выводится. Любая помощь очень ценится. Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Это идеальный вариант использования для условного рендеринга .
Вы в основном хотите визуализировать компонент, основанный на условии (в данном случае логическое от вашего состояния).

Условный рендеринг может быть записан несколькими способами , как вы можете видеть в документах .

В вашем случае я бы пошел на что-то вроде этого: 

return (
  <div style={{ height: "250px" }}>
    <Popover
      active={this.state.active}
      activator={activator}
      onClose={this.togglePopover}
    >
      <ActionList
        items={[
          {
            content: "One",
            onAction: () => {
              this.setState({ title: "One" }, function() {
                this.togglePopover();
              });
            }
          }
        ]}
      />
      {this.state.active && this.renderButton()}
    </Popover>
  </div>
);
}
}

Обратите внимание, что я просто поместил его в произвольном месте, не стесняйтесь перемещать его в нужную вам разметку.

0 голосов
/ 18 сентября 2018

Благодаря помощи каждого я наконец смог сделать это. Я поместил дополнительный атрибут в состояние isButton и изначально установил его равным false. Вот моя функция рендеринга: 

render() {
 const activator = (
   <Button onClick={this.togglePopover}>{this.state.title}</Button>
 );
return (
  <div style={{ height: "250px" }}>
    <Popover
      active={this.state.active}
      activator={activator}
      onClose={this.togglePopover}
    >
      <ActionList
        items={[
        {
        content: "One",
        onAction: () => {
          this.setState({ title: "One", isButton: true }, function() { //Set isButton to true
            this.togglePopover();
          });
        }
      }
    ]}
  />
{this.state.isButton && this.renderButton()} //ADDED HERE
</Popover>
  </div>
);
}

Пожалуйста, посмотрите на комментарии, чтобы увидеть, где был изменен код. Спасибо!

0 голосов
/ 17 сентября 2018

Вам нужно добавить еще одну переменную, чтобы проверить, щелкает ли элемент, и, как прокомментировал @azium, вам нужно добавить вывод в ваш JSX, а не внутри функции onAction.

По правутеперь вы закрываете Popper при нажатии на элемент, устанавливая this.state.active на false, чтобы вы не могли полагаться на это при визуализации кнопки.Вам нужно добавить что-то вроде this.state.isButton или что-то еще и в onAction включить: 

onAction: () => {
  this.setState({ title: "One", isButton: true }, () => {
    this.togglePopover();
   });
}

, а затем в JSX: 

{this.state.isButton && this.renderButton()}
...