Не разбирался еще толком с 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>
);
}
});
