У меня есть обработчик событий onClick
, который срабатывает при щелчке точки данных на графике. На графике есть две кривые, и в зависимости от выбранной кривой я хочу, чтобы у дочернего компонента было задано начальное состояние. Например, щелкните curve1
и установите это в качестве начального состояния в следующем компоненте, а также для curve2
.
Используя recharts
, я визуализирую несколько Line
компонентов с помощью обработчика onClick
в опоре activeDot
:
<Line
name={properties.prettyName}
isAnimationActive={true}
activeDot={{
onClick: (data) =>
changeURLView(data)
}}
type="linear"
key={properties.key}
dataKey={properties.dataKey}
stroke={properties.color}
/>
И обработчик changeURLViewScan
:
const changeURLView = (data) => {
// I can check which curve the datapoint belongs to here
const sID: string = data.payload.id
router.push(
'/p/[pID]/s/[sID]',
router.asPath + `/s/${sID}`
)
}
React Router имеет функцию generatePath
, которая позволяет передавать реквизиты следующему компоненту, однако я не вижу чего-то, что могло бы sh выполнить это с помощью Далее. js.
Next/Router
позволяет передавать параметры запроса, но я не хочу, чтобы это было в URL-адресе. Я хочу иметь возможность щелкнуть кривую, и начальное состояние следующего компонента уже будет заполнено в зависимости от нажатой кривой. Я мог бы иметь опору initialCurveState
и таким образом установить состояние компонента, однако проблема остается - как передать опору или установить начальное состояние с помощью Next. js?