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

Gatsby功能组件事件处理传递“ this”

2 个答案: