Функциональный компонент Gatsby Обработка событий Передача 'this'

Question

Используя функциональный компонент Gatsby / React, как передать this обработчику событий? Мне нужно управлять классами CSS <figure> через "classList".

import React from 'react'

const Hamburger = props => {
  const clickHandler = () => {
    this.classList.toggle('open')
  }
  return (
    <figure className="hamburger open" onClick={clickHandler.bind(this)}>
      <i>menu</i>
    </figure>
  )
}

export default Hamburger

Answer 1

Здесь есть две проблемы:

• Функции стрелок не имеют своих собственных this, поэтому браузер фактически не может установить this обработчика щелчков для элемента.
• Но большая проблема в том, что вам не следует менять DOM напрямую при использовании React.

Способ сделать это с помощью React - отслеживать, открыт ли компонент через состояние (в этом случае useState hook ), и соответственно устанавливать список классов:

import React from 'react'

const {useState} = React;

export default const Hamburger = props => {
  const [open, setOpen] = useState(true);

  const clickHandler = () => {
    setOpen(!open);
  };

  return (
    <figure className={'hamburger' + (open ? ' open' : '')} onClick={clickHandler}>
      <i>menu</i>
    </figure>
  )
}

export default Hamburger

Answer 2

Я думаю, вам нужно изменить первое props => { на function(props){, функция создаст замыкание для this, если функции нет, this найдет внешнее замыкание

import React from 'react'

const Hamburger = function(props){
  const clickHandler = () => {
    \\ classList.toggle('open')
  }
  return (
    <figure className="hamburger open" onClick={clickHandler}>
      <i>menu</i>
    </figure>
  )
}

export default Hamburger