<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
});
},<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 });
}function serialize(entity) {
return JSON.stringify({ type: entity.constructor.name, data: entity });
}
function deserialize(str, types) {
var parsed = JSON.parse(str);
return types[parsed.type] ? new types[parsed.type](parsed.data) : {};
}
function User(data) {
this.id = data.id;
this.name = data.name;
}
var user = new User({ id: 1, name: 'Nik' });
console.log('User ->', user, ' instanceOf User ===', user instanceof User);
// User -> User {id: 1, name: "Nik"} instanceOf User === true
var userJSON = serialize(user);
console.log('Serialized user ->', userJSON);
// Serialized user -> {"type":"User","data":{"id":1,"name":"Nik"}}
var restoredUser = deserialize(userJSON, { 'User': User });
console.log('Deserialized user ->', restoredUser, ' instanceOf User ===', restoredUser instanceof User);
// Deserialized user -> User {id: 1, name: "Nik"} instanceOf User === true
//
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.
Store.fetchData().then( ... )Store.on('DATA_LOADED', (data) => this.setState({ data }); //как примерНадо, чтобы при нажатии на элемент меню он выделялся другим цветом. Это все получилось сделать.
class MyMenu extends React.Component {
constructor(props) {
super(props);
this.handleItemClick = this.handleItemClick.bind(this);
this.state = { selectedItem: null };
}
handleItemClick(selectedItem) {
console.log('handleItemClick', selectedItem);
this.setState({ selectedItem });
}
render() {
const { items } = this.props;
const { selectedItem } = this.state;
const { handleItemClick } = this;
return (
<ul>
{ items.map( (item, key) => (
<MenuItem
key={key}
item={item}
isActive={item === selectedItem}
onClick={handleItemClick}
/>
)) }
</ul>
);
}
}а как же тогда сделать, так, чтоб если пользователь вводит в строку значение, которое не соответсвует регулярному выражению - выполнялась функция event.preventDefault() ? ведь keyDown и keyPress для этого не подходят, так как они берут старые занчения
<input type="text" value={someValue} onChange={handleChangeSomeValue}/>handleChangeSomeValue(e) {
const nextVal = e.currentTarget.value;
if (!isValid(nextVal)) {
return;
}
this.setState({ someValue: nextVal });
}