Как реализовать редактирование данных?

Question

[trufinol]

Всем привет!
Возможно, вопрос глупый, но решение задачи я найти не смог.

Задача - реализовать возможность CRUD-операций для приложения. C, R, D уже есть.
Необходимо реализовать возможность редактировать и сохранять изменения на сервере.
Данные загружаю из Firebase в таком формате:

[
...
{
	id: "1",
	title: "some title",
	number: "1111",
	format: "some format",
	string: "some string"
	}
...
]

Использовал модуль "react-edit-inline", который позволяет редактировать поле при клике на нем.
Так выглядит сам компонент:

export default React.createClass({
	
	dataChanged(newdata) {
		
		this.setState({
			data: newdata
		});
	},
	
	render() {
		
		return (
			<div>
			<div
			<InlineEdit paramName="title" change={this.dataChanged} text={this.props.title} />
			<InlineEdit paramName="year"  change={this.dataChanged} text={this.props.nubmer} />
			<InlineEdit paramName="year"  change={this.dataChanged} text={this.props.format} />
			<InlineEdit paramName="stars" change={this.dataChanged} text={this.props.string} />
			</div>
		)
	}
})

Понятно, функция "dataChanged" перезаписывает значение в выбранном поле. У меня есть свойство объекта и его значение, но у меня нет самого объекта, к которому привязано это свойство.
Не понятно как исходя из этих данных реализовать перезапись данных.

Answer 1

[Максим]

Добрый день.

но у меня нет самого объекта, к которому привязано это свойство.

А откуда у вас тогда this.props.title, например?

После редактирования поля (полей) вы отправляете запрос на сервер с данными из формы (по нажатию на кнопку в родительском компоненте, или как?). Используйте id, которое вам изначально приходит (судя по формату данных в вашем вопросе) и находится, вероятно, в this.props.id

Comments

[trufinol]

Наверное я неправильно выразился. В функции "dataChanged" я имею доступ только к паре свойство-значение. Как мне получить доступ к объекту, в котором это свойство изменено? Догадываюсь, что нужно использовать метод componentDidUpdate, но не могу сформулировать как корректно обратиться к компоненту чтобы отослать измененные данные на сервер.

[Максим]

У вас инпуты - дочерний компонент? Есть родитель же, который в props имеет title,number и тд? Получается, что он и id имеет. Создайте в нем функцию save, и на изменениях инпута, если вы хотите делать это постоянно и мгновенно (а я думаю, что вряд ли вы хотите постоянно на каждый чих отправлять запрос на сервер) вызывайте this.props.save( ). Поэтому я и спрашиваю, как у вас устроен компонент? Вы привели только кусочек с инпутами, после изменения текста в них - вы изменяете стейт. Ок. А дальше что? Есть кнопка - "отправить данные на сервер"? или как?

[trufinol]

В моем случае родителем компонента с инпутами является так называемый stateless function component, который через this.props.data.map проходит по каждому компоненту (тому, который из примера) из массива и рендерит его. В нем надо написать эту функцию save, я правильно понял? Возможно я неправильно распределил структуру приложения и из-за этого возникли сложности.
Кнопку я не предусмотрел, спасибо, добавлю.