class ConnectedTextField extends React.Component<IConnectedTextFieldProps, void> {
public componentWillMount() {
this.props.validateField(this.props.modelValue.value);
}
public handleChange = (value: string) => {
this.props.changeField(value);
};
public render() {
const { modelValue } = this.props;
return (
<TextField
value={modelValue.value}
valid={modelValue.valid}
onChange={this.handleChange}
/>
);
}
}
const mapStateToProps = (state: IStore, props: IConnectedTextFieldProps) => {
const modelValue = resolveFieldModel(props.fieldReducerName, state);
return { modelValue };
};
const mapDispatchToProps = (dispatch: Dispatch<{}>, props: IConnectedTextFieldProps) => ({
changeField: (value: string) => dispatch(setValueThunkActionCreator(value, props.fieldReducerName)),
validateField: (value: string) => dispatch(validateFieldThunkActionCreator(value, props.fieldReducerName)),
});class ConnectedTextField extends React.Component<IConnectedTextFieldProps, any> {
public state = {
value: '',
}
public handleChange = (value: string) => {
this.setState({ value });
};
public render() {
return (
<TextField
value={this.state.value}
onChange={this.handleChange}
/>
);
}
}
На каждый placemark вы можете повесить обработку события click, и на этом этапе можно про яндекс карты забыть.
Все внешние элементы (вроде дополнительного описания) создаете как react компоненты, можете абсолютно позиционировать поверх карты, после срабатывания события click - выводите инфу о выбранном объекте.
По поводу изменения цвета метки при наведении или клике - ссылка на пример - в используемом плагине и события, и свойства - меняются как обычные props компонента.
react-yandex-maps - это удобная абстракция над API яндекс карт, которая повторяет этот API, но в декларативном стиле, так что разбираться лучше с самим API, и вам не составит труда все реализовать на react-yandex-maps, или даже написать свои компоненты - обертки.