<CSSTransitionGroup transitionName="ProductCategoriesMenu--submenu-transition" transitionEnter={false}>
{category.products.length && isCategorySelected ? this.renderSubMenu(category) : null}
</CSSTransitionGroup>
.ProductCategoriesMenu--submenu-transition-leave {
max-height: 1000px;
overflow: hidden;
}
.ProductCategoriesMenu--submenu-transition-leave-active {
max-height: 0;
transition: max-height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
<Input ... onChange={this.change}>
change = () => {
console.log("WTF");
this.setState({ open: !this.state.open })
};
constructor(...args) {
super(...args);
this.state = {
open: false,
value: 'select'
};
this.change = this.change.bind(this)
}
handleSubmit(data=this.getFormData()) {
<div className="filter-popup" onClick={this.props.onClick}>
....
closeModal() {
this.setState({
modalIsOpen: false
});
this.forceUpdate()
},
<li className="filter-result-item" onClick={this.showPopup}>
...
showPopup() { ... }
closeModal(e) {
e.stopPropagation();
this.setState({
modalIsOpen: false
});
},
checkedChange(name, val) {
this.setState({ [name]: val });
}
class FilterItems extends React.Component {
render() {
return (
<div>
<input onChange={(e) => this.props.handleChange('show_title1', e.target.checked)}
type="checkbox"
checked={this.props.show_title1}/>Столбец 1
<input onChange={(e) => this.props.handleChange('show_title2', e.target.checked)}
type="checkbox"
ref="show_title2"
checked={this.props.show_title2}/>Столбец 2
</div>
);
}
<MyStatistic items={[ { titile: 'abc', message: 'cde' } ]}
constructor(props) {
super(props);
const finalMouseDelay = props.mouseDelay || 300;
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.toggleHover = _.debounce(this.toggleHover.bind(this), finalMouseDelay);
this.state = { hover: false };
}
handleMouseLeave() {
this.toggleHover(false);
}
handleMouseEnter() {
this.toggleHover(true);
}
toggleHover(to) {
this.setState({ hover: to });
}
Falcor is middleware. It is not a replacement for your application server, database, or MVC framework. Instead Falcor can be used to optimize communication between the layers of a new or existing application.