javascript - Gatsby 功能组件事件处理传递 'this'

Question

使用 Gatsby/React 功能组件，如何传递 this到事件处理程序？我需要管理 <figure> 的 css 类通过“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 设置到元素。
• 但更大的问题是在使用 React 时不应该直接更改 DOM。

用 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