Не пойму как добавить собитие в Placemark, точнее в его тело BalloonContentBody
export const MapEtm = (props) => {
const classes = useStyles()
const changeStore = ()=>{
alert('555')
}
return (
<YMaps>
<Map width="100%"
height="100%"
defaultState={ {
center: props.stores[0].gps.split(','),
zoom: 5,
controls: [ 'zoomControl' ],
} }
modules={ [ 'control.ZoomControl' ] }
>
<Clusterer
options={ {
preset: 'islands#blueCircleIcon',
groupByCoordinates: false,
} }
// props.changeCurrentStore
>
{ props.stores.map((coordinates, index) => (
<Placemark key={ index } modules={ [ 'geoObject.addon.balloon' ] } changeStore={changeStore} geometry={ coordinates.gps.split(',') }
properties={ {
balloonContentBody:
`
<div style='max-width:200px; padding:10px; display:flex; flex-direction: column;'>
<div style='margin-bottom:5px; color:#2b2b2b; font-weight: bold;'>${ coordinates.metro?coordinates.metro:'' }</div>
<div style='margin-bottom:5px;color:#6f6f6f; font-weight:500'>${ coordinates.name }</div>
<div style='color:#1181d7;font-weight:500'>${ coordinates.time }</div>
<button onClick={'ТУТ ДОЛЖНО БЫТЬ СОБЫТИЕ'} style='margin-top:5px; margin-bottom:5px;color:#fff; background:#1181d7; outline: none; border:none; width:150px; cursor:pointer; padding:7px 10px; text-transform:uppercase; border-radius: 2px;' >Выбрать</button>
<div style='color:#034ea2; font-size:18px; font-weight: 400;'>${ coordinates.phone }</div>
</div>
`
,
} }
/>
)) }
</Clusterer>
</Map>
</YMaps>
)
}
Событие должно вешаться в proterties -> balloonContentBody -> Кнопка button. Событие прилетает в эту компонету пропсами. Пробовал вариант onClick={()=> props.someEvents()} - и прочие вариации не работают
После выполнения onClick должно еще срабатывать событие закрытия тела маркера (это отдельный вопрос). За помощь заранее спасибо