Я изо всех сил пытаюсь понять концепцию, которую я считаю связанной с областью видимости, и не могу понять, как это сделать.
Я работаю над компонентом класса, включающим в себя функции избыточности и таблицы antd. , Таблица показывает хорошо, так что это хорошо. Он извлекает данные из моего магазина и отображает их правильно. Вот как это выглядит. Обратите внимание, в частности, на кнопку действия «Архив» справа, которая относится к моему вопросу.
Я решил использовать тег antd popconfirm, чтобы, если кто-то нажимая на ссылку архива, они получают дополнительный диалог подтверждения. Это также отлично работает. Появляется диалоговое окно, и я могу нажать Да / Нет, и вызывается соответствующая функция. Теперь моя проблема заключается в том, что свойство фактически обновляется в моем магазине приставок. Я хотел бы обновить это свойство для «архива» (до истины) и «архива» (до текущей даты) ) полей в избыточном, если кто-то продолжает подтверждать всплывающее диалоговое окно.
Функция, в частности, где это должно произойти (игнорируйте комментарии. Я пытался обновить объект):
function confirm(record, e) {
message.success('Archived');
// const archived = true;
console.log("confirm function.. record")
// setState(() => ({ archived }));
// record.archived = false;
// record.archiveddate = moment();
console.log(record);
}
Через console.log я вижу, что в моей функции подтверждения у меня действительно есть доступ к определенному свойству (или «записи» выше) объекта (например, property.id, property.archived, property.archiveddate). Я считаю, что важно отправить правильный идентификатор свойства. Но я не уверен, что поместить в функцию подтверждения, чтобы сделать это. Отчасти я думаю, что это потому, что функция не находится внутри компонента класса, и поэтому я не могу просто сделать props.archiveProperty, как я мог бы в противном случае, благодаря mapdistpatchtoprops.
Итак, в общем, кое-что О методе таблицы antd, который заставляет меня определять эту структуру данных для столбцов и строк (и функций) вне компонента класса, мешает мое (отсутствие?) понимание того, как здесь работает область действия и как в конечном итоге обновить мое свойство.
ценим любые указания!
Весь файл js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import selectProperties from '../selectors/properties';
import { startEditProperty } from '../actions/properties';
import { Table, Tag, Divider, Popconfirm, message } from 'antd';
import moment from 'moment';
const 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={confirm.bind(this, record)}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<a href="#">Archive</a>
</Popconfirm>
</span>
),
},
];
function confirm(record, e) {
message.success('Archived');
// const archived = true;
console.log("confirm function.. record")
// setState(() => ({ archived }));
// record.archived = false;
// record.archiveddate = moment();
console.log(record);
}
function cancel(e) {
console.log(e);
message.error('Cancelled');
}
export class PropertyList extends React.Component {
// onSubmit = (property) => {
// this.props.archiveProperty(this.props.property.id, property);
// this.props.history.push('/');
// };
render() {
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={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) => ({
archiveProperty: (id, property) => dispatch(startEditProperty(id, property))
});
export default connect(mapStateToProps, mapDispatchToProps)(PropertyList);