Как открыть только один поповер

Question

Используя Ant Design, я создал таблицу, которая отображает несколько записей с действиями в виде строк таблицы.Столбцы выглядят следующим образом:

const columns = [
  {
    title: 'Name',
    key: '_id',
    render: record => getFullName(record),
  },
  {
    key: 'action',
    align: 'center',
    render: (record) => {
      const content = (
        <Row type="flex" gutter={8}>
          <Col>
            <EditAccountModal closePopover={this.closePopover} agent={record} />
          </Col>
          <Col>
            <Button
              type="danger"
              onClick={() => this.handleRemoveAgent(record)}
            >
              Remove
            </Button>
          </Col>
        </Row>
      );
      return (
        <Popover
          content={content}
          visible={this.state.visible}
          trigger="click"
          onVisibleChange={this.onVisibleChange}
        >
          <Icon className="account-action-button" type="ellipsis" />
        </Popover>
      );
    },
  },
];

Проблема в том, что щелчок по одному поповеру открывает все всплывающие окна записей;видимое состояние становится истинным для всех поповеров.Мне нужен только тот, который я щелкнул, чтобы открыть.

Answer 1

Ну, у вас есть все всплывающие окна, связанные с одним значением: visible={this.state.visible}.Таким образом, это единственное значение контролирует видимость для ВСЕХ из них.

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