События, мешающие интерактивной легенде с диаграммами Победы - PullRequest
Новая
       15

События, мешающие интерактивной легенде с диаграммами Победы

0 голосов
/ 18 октября 2019

Я создаю интерактивную легенду с диаграммами Победы, которая уже работает не так уж и плохо, однако я борюсь с проблемой, когда события, кажется, мешают друг другу.

Вот код, создающий события: 


    const events = series.map((_, idx) => {
      return {
        childName: ["chart-legend"],
        target: ["data", "labels"],
        eventKey: String(idx),
        eventHandlers: {
          onClick: () => {
            return [
              // First mutation is to clear previous style mutation on ALL keys
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                eventKey: "all",
                mutation: props => null
              },
              // Second mutation is to hide series (doing so once for all keys of that item)
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                mutation: props => {
                  if (!this.state.hiddenSeries.delete(idx)) {
                    // Was not already hidden => add to set
                    this.state.hiddenSeries.add(idx);
                  }
                  this.setState({
                    hiddenSeries: new Set(this.state.hiddenSeries)
                  });
                  return null;
                }
              }
            ];
          },
          onMouseOver: () => {
            return [
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                eventKey: "all",
                mutation: props => ({
                  style: { ...props.style, fillOpacity: 0.5 }
                })
              }
            ];
          },
          onMouseOut: () => {
            return [
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                eventKey: "all",
                mutation: p => null
              }
            ];
          }
        }
      };
    });

Полный рабочий код: https://codesandbox.io/s/interactive-legend-lsxff?fontsize=14

Как видите, событие onClick изменяет состояние реакции, чтобы скрыть связанные бары. onMouseOver и onMouseOut направлены на изменение / восстановление стиля баров.

Это почти работает, за исключением того, что если я нажимаю на элемент легенды (чтобы скрыть панель), то нажимаю еще раз (показать его обратно)), то он больше не реагирует на события onMouseOver.

Если я щелкну по другому элементу легенды, то первый ответит, как и ожидалось, но не другой.

Есть идеи о том, что может быть причиной этого? Я подозреваю, что это связано с изменением состояния реакции, которое вызывает перерисовку, отсюда и перерасчет событий, но я изо всех сил пытаюсь это исправить.

...