Как вы используете popconfirm в таблице ответов antd?

Question

У меня есть компонент reactjs, который отображает таблицу antd, одним из столбцов которой является выполнение действия для архивирования элемента в строке. Если кто-то нажимает на «Архив», я хочу, чтобы он показывал всплывающее подтверждение с подтверждением «да / нет», прежде чем он продвинется и заархивирует элемент.

Все работает нормально пока я не добавлю блок Popconfirm. Тогда я получаю ошибку ниже. Я думаю, что что-то не так с моим использованием onconfirm и oncancel в popconfirm, но я просто не вижу здесь чего-то очевидного. Ценю любые отзывы!

import React, { Component } from 'react';
import { connect } from 'react-redux';
import selectProperties from '../selectors/properties';
import { Table, Tag, Divider, Popconfirm, message } from 'antd';

export class PropertyList extends React.Component {
  constructor(){
    super();

    this.columns = [
      {
        title: 'Address',
        dataIndex: 'street',
        key: 'street',
        render: text => <a>{text}</a>,
      },
      {
        title: 'City',
        dataIndex: 'city',
        key: 'city',
      },
      {
        title: 'State',
        dataIndex: 'state',
        key: 'state',
      },
      {
        title: 'Workflow',
        key: 'workflow',
        dataIndex: 'workflow',
        sorter: (a, b) => a.workflow.length - b.workflow.length,
        sortDirections: ['descend'],
        render: workflow => {
          let color = 'geekblue';
          if (workflow === 'Inspection' || workflow === 'Maintenance' || workflow === 'Cleaning') {
            color = 'volcano';
          }
          else if (workflow === 'Rented') {
            color = 'green';
          }
          return (
            <span>
              <Tag color={color} key={workflow}>
                {workflow.toUpperCase()}
              </Tag>
            </span>
          );
        },
      },
      {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
          <span>
            <a>Edit</a>
            <Divider type="vertical" />
            <Popconfirm
              title="Are you sure?"
              onConfirm={this.confirm(record)}
              onCancel={this.cancel}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">Archive</a>
            </Popconfirm>
          </span>
        ),
      },
    ];
  }

  confirm = (record)  => {
    message.success('Archived');
    console.log("confirm function.. record");
    console.log(record);
  }

  cancel = () => {
    message.error('Cancelled');
  }

  render() {
    console.log("PropertyList render");
    console.log(this.props);
    console.log(this.props.properties);
    console.log(this.columns);
    return (
        <div className="content-container">
            <div className="list-body">
            {
                this.props.properties.length === 0 ? (
                <div className="list-item list-item--message">
                    <span>No properties. Add some!</span>
                </div>

                ) : (
                  <Table 
                    rowKey="id" 
                    dataSource={this.props.properties} 
                    columns={this.columns} 
                    pagination = { false } 
                    footer={() => ''} 
                  />
                )
            }
            </div>
        </div>
    )
  }
};

const mapStateToProps = (state) => {
  console.log("PropertyList mapStateToProps..");
  console.log(state);
  return {
    properties: selectProperties(state.properties, state.filters)
  };
};

const mapDispatchToProps = (dispatch) => ({
  updateProperty: (id, property) => dispatch(editProperty(id, property))
});

export default connect(mapStateToProps, mapDispatchToProps)(PropertyList);

Answer 1

Вы вызываете метод confirm (в onConfirm) сразу же после рендеринга строк Table.

Изменение:

onConfirm={this.confirm(record)}

Кому:

onConfirm={() => this.confirm(record)}