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