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

问题是单击一个弹出窗口会打开所有记录的弹出窗口；所有弹出窗口的可见状态均变为true。我只需要单击一下即可打开它。

Answer 1

好吧，所有弹出窗口都绑定到一个值：const check = o => k => [o.hasOwnProperty(k), o = (o || {})[k]][0]; var myObj = { level1: { level2: { name: 'Frank' } } }; console.log(['level1', 'level2', 'name'].every(check(myObj))); console.log(['level1', 'level3', 'name'].every(check(myObj)));。因此，单个值控制着所有这些对象的可见性。

您需要做的是跟踪每个人的可见性。您可以保留一个与每个弹出框相对应的布尔数组，然后分别切换它们。或者，您可以将弹出窗口放到其自己的组件中，该组件的内部状态会跟踪其自身的可见性。

如何仅打开一个弹出窗口

1 个答案: