Задать вопрос
@vaskadogana
Frontend developer

Передача state в реакте к предку, возможно ли без глобального хранилища?

Пишу на реакт, есть такой код

var ContentControlPage = React.createClass({
	getInitialState: function() {
		return {
			displayedTransport: TRANSPORT_INFO
			
		}

	},
	
	handleSearch: function(inputValue){
		var searchQuery = inputValue.toLowerCase();
		var newelement = 'false';
		var displayedTransport = TRANSPORT_INFO.filter(function(el){
			var searchValue = el.name.toLowerCase();
			return searchValue.indexOf(searchQuery) !== -1;
		});
		this.setState({
			displayedTransport: displayedTransport,
		})
	},
	fix_it: function(event){
			var displayedTransport = TRANSPORT_INFO;
			for (var i=0; i<displayedTransport.length; i++) {
				displayedTransport[i].fixed = false;
			}
			console.log(displayedTransport);
	},
  	render: function() {
  		
		return(
			<div>
					<FilterForAll updateFilterForAll={this.handleSearch}  />
					<div className="left_sidebar">
						<ul className="transport_data_container"  onClick={this.fix_it}>
							{
								this.state.displayedTransport.map(function(el){
									return <Filtered_Data 
											key={el.id} 
											name={el.name} 
											imagesrc={el.imagesrc}
											/>;
								})	
							}
						</ul>
					</div>
			</div>
		)
	}
});
в классе Filtered_Data, есть еще один класс на который нужно повесить event onClick которое нужно обрабатывать на уровне ContentControlPage, чтобы манипулировать state displayedTransport
  • Вопрос задан
  • 185 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@AlexChebanenko
Дорогой коллега, Вам необходимо из этой компоненты в компоненту Filtered_Data передать в качестве prop-а функцию (назовём её, например, handleClick), которая будет вызываться из дочерней компоненты Filtered_Data как this.props.handleClick() (параметры добавить, если нужно). handleClick должна располагаться в родительской ContentControlPage и изменять её state (там будет вызов this.setState()).

У некоторых разработчиков это может вызывать сложность в восприятии, и в каком-то смысле это порождает "кашу" и является анти-паттерном. Если такой трюк в Вашем проекте не единичный, рекомендую посмотреть в сторону архитектур Flux или Redux.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@davidnum95
Жесть какая то конечно, через props можно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽