盖茨比功能组件事件处理传递'这个'

Question

使用Gatsby / React功能组件，如何将this传递给事件处理程序？我需要通过“classList”来管理<figure>的css类。

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，因此浏览器实际上无法将click处理程序的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

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