Использовать Redux для передачи из ребенка к родителю значение?

Question

[Степан]

Не разбирался еще толком с Redux. Но стоит задача передать из ребенка в родителя значение.
Раньше я использовал для этого Reflux.

Как в Redux это сделать. Я почитал про него слишком много заморочек для такой небольшой задачи, возможно я ошибаюсь?

const FilterItem = React.createClass({

	mixins: [
		OnClickOutside
	],

	handleClickOutside: function(evt) {
		this.setState({modalIsOpen: false});
	},

	getInitialState() {
		return {
			modalIsOpen: false
		};
	},

	closeModal() {
		this.setState({
			modalIsOpen: false
		});
		this.forceUpdate()
	},

	render() {

		let categories = (this.props.type == 'categories') ?
			<div className={classNames('popups', {'active': this.state.modalIsOpen})} ><FilterPopup onClick={this.closeModal} /></div> : '';

		return (
			<li className="filter-result-item" onClick={this.showPopup}>
				{img}
				{categories}
			</li>
		);
	}
});

И сам попап

const FilterPopup = React.createClass({
	filterPopup(){},
	selectAll(){},
	render() {

		return (
				<div className="filter-popup" onClick={this.props.onClick}>
					<div className="filter-popup-header">
						<div className="filter-popup-select-all checkbox"  onClick={this.selectAll}>
							<input type="checkbox" id="test" name="test1"/>
							<label htmlFor="test1"><span></span><i>Select All</i></label>
						</div>
					</div>

					<div className="filter-popup-body">
						<div className="filter-popup-select checkbox">
							<input type="checkbox" id="test1" name="test1"/>
							<label htmlFor="test1"><span></span><i>Speaker</i></label>
						</div>
						<div className="filter-popup-select checkbox">
							<input type="checkbox" id="test1" name="test1"/>
							<label htmlFor="test1"><span></span><i>Organizer</i></label>
						</div>
						<div className="filter-popup-select checkbox">
							<input type="checkbox" id="test1" name="test1"/>
							<label htmlFor="test1"><span></span><i>Sponsor</i></label>
						</div>
						<div className="filter-popup-select checkbox">
							<input type="checkbox" id="test1" name="test1"/>
							<label htmlFor="test1"><span></span><i>Atendee</i></label>
						</div>
					</div>

					<div className="filter-popup-footer">
						<div className="filter-popup-reject" onClick={this.props.onClick}><i className="fa fa-times"></i></div>
						<div className="filter-popup-confirm"  onClick={this.props.onClick}><i className="fa fa-check"></i></div>
					</div>
				</div>
		);
	}

});

Answer 1

[Никита Гущин]

Если только у Вас не какой-то специфичный случай - редаксе все (ну или почти все) состояние храниться в хранилище, поэтому такой проблемы не возникает в принципе.

Покажите код.

UPD1:

Скорее всего дело в том, что у вас стоит обработчик клика на дочернем\родительском элементе и когда выполняется:

<div className="filter-popup" onClick={this.props.onClick}>
....
closeModal() {
    this.setState({
      modalIsOpen: false
    });
    this.forceUpdate()
  },

То событие (клик) всплывает, это в свою очередь приводит к выполнению:

<li className="filter-result-item" onClick={this.showPopup}>
...
showPopup() { ... }

Получается, что попап скрывается и сразу же показывается вновь. Если не придираться к тому как это вообще реализовано (и т.д.) - вам нужно сделать это https://developer.mozilla.org/ru/docs/Web/API/Even...

closeModal(e) {
    e.stopPropagation();
    this.setState({
      modalIsOpen: false
    });
  },

Вот рабочий пример jsfiddle.net/yuvuyrhv/26

Comments

[Степан]

Никита Гущин вопрос был стоит ли подключать Redux из за такой мелочи, вот код, как выше предложили не получаеться. State не меняется у родителя, при вызове из ребенка

[Никита Гущин]

Анатолий: т.е. Вы взяли редакс только ради этого? На нем надо в принципе приложение писать

[Никита Гущин]

Анатолий: из кода все-равно не понятно, что вы пытаетесь сделать...

[Степан]

Никита Гущин создао ребенка передал функцию. В ребенке при нажатии в ребенке на элемент, вызывается функция из родителя, но state не меняется.

[Никита Гущин]

Анатолий: обновил ответ

[Степан]

Никита Гущин чей ?

[Никита Гущин]

Анатолий: свой)

[Степан]

Никита Гущин спасибо Никита. Написал вам на почту. Ответь есть предложение для вас