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

Question

Я использую 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(). Всякий раз, когда я щелкаю элемент "Один" в раскрывающемся списке, он печатает "Нажатие кнопки", но на экран ничего не выводится. Любая помощь с благодарностью. Заранее спасибо!

Answer 1

Вам нужно добавить еще одну переменную, чтобы проверить, щелкает ли элемент, и, как прокомментировал @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()}

Answer 2

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

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

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

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

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

Answer 3

Благодаря всеобщей помощи я наконец смог сделать это. Я поместил дополнительный атрибут в состояние 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>
);
}

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