Как добавить eventListener в стиль отображения div в React - PullRequest
Новая
       18

Как добавить eventListener в стиль отображения div в React

0 голосов
/ 18 июня 2020

Я пытаюсь запустить функцию, когда в React отображается div, чтобы изменить размер диаграммы Highcharts в соответствии с ее родительским элементом. Highcharts не изменяет размер автоматически при изменении размера родительского элемента - есть решение, чтобы эта работа работала здесь https://www.highcharts.com/forum/viewtopic.php?t=39587, но ему уже несколько лет, и я пытаюсь заставить его работать с помощью хуков React . 

  const [toggleDiv, setToggleDiv] = useState<boolean>(false);

  const handleToggle = (): void => {
    setToggleDiv(!toggleDiv);
  };

  const sideBar = useRef<HTMLDivElement>(null);
  const div = sideBar.current;
  if (div) {
    div.addEventListener('transitionend', () => { // this doesn't get called like it says it should in the linked article
      if (Highcharts.charts[0] !== undefined) {
        Highcharts.charts[0].reflow();
      }
    });
  }
...
    <>
      <button
        type="button"
        onClick={handleToggle}
        style={{ float: 'left' }}
      >
        Hide div
      </button>
      <div
        style={{
          width: '200px', border: '1px blue solid', float: 'left', display: toggleDiv ? 'inline' : 'none',
        }}
        ref={sideBar}
      />
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
          {...props}
        />
      </div>
    </>

Проблема моего кода в том, что обратный вызов прослушивателя событий никогда не вызывается. Как я могу вызвать Highcharts.charts[0].reflow();, когда свойство отображения div изменяется между 'none' и 'inline'?

1 Ответ

0 голосов
/ 18 июня 2020

Вы можете прослушивать значение «toggleDiv» с помощью ловушки useEffect. 

useEffect(() => {
  Highcharts.charts[0].reflow()
}, [toggleDiv])

//This function gets called everytime toggleDiv changes

Имейте в виду, что когда вы хотите получить доступ к фактическому значению состояния, вы всегда хотите сделать это: 

setToggleDiv(prevState => !prevState);

А не это: 

setToggleDiv(!toggleDiv); // <-- This is bad
...