在我的情况下，这是解决方案= ()=> {}

methodName = (params) => {
//your code here with this.something
}

如果你在生命周期方法中调用你创建的方法，比如componentDidMount…那么你只能用这个。ontogglloop = this. ontooglloop .bind(this)和胖箭头函数ontogglloop = (event) =>{…}。

在构造函数中声明函数的正常方法不起作用，因为生命周期方法在前面被调用。

我想解释一下为什么这是没有定义的: 如果在非箭头函数中使用this，则在非严格模式时，this将绑定到全局对象。但在严格模式下，这将是未定义的(https://www.w3schools.com/js/js_this.asp)。

而且ES6的模块总是处于严格模式(javascript:在模块中使用strict是不必要的)。

你可以在ontogglloop函数中绑定这个PlayerControls组件的实例，在构造函数中使用bind方法:

constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }

    this.onToggleLoop = this.onToggleLoop.bind(this)
}

或者使用箭头函数:

onToggleLoop = (event) => {
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
}

箭头函数没有上下文，因此箭头函数中的this将表示定义箭头函数的对象。

我在一个渲染函数中遇到了类似的绑定，并以以下方式传递上下文:

{someList.map(function(listItem) {
  // your code
}, this)}

我还用过:

{someList.map((listItem, index) =>
    <div onClick={this.someFunction.bind(this, listItem)} />
)}

你可以重写如何从render()方法调用ontogglloop方法。

render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

return (
  <div className="player-controls">
    <FontAwesome
      className="player-control-icon"
      name='refresh'
      onClick={(event) => this.onToggleLoop(event)}
      spin={this.state.loopActive}
    />       
  </div>
    );
  }

React文档显示了从属性中的表达式调用函数时的这种模式。

在我的例子中，对于使用forwardRef接收ref的无状态组件，我必须做这里所说的https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

从这个(onClick没有访问'this'的等价物)

const Com = forwardRef((props, ref) => {
  return <input ref={ref} onClick={() => {console.log(ref.current} } />
})

这(它工作)

const useCombinedRefs = (...refs) => {
  const targetRef = React.useRef()

  useEffect(() => {
    refs.forEach(ref => {
      if (!ref) return

      if (typeof ref === 'function') ref(targetRef.current)
      else ref.current = targetRef.current
    })
  }, [refs])

  return targetRef
}

const Com = forwardRef((props, ref) => {
  const innerRef = useRef()
  const combinedRef = useCombinedRefs(ref, innerRef)

  return <input ref={combinedRef } onClick={() => {console.log(combinedRef .current} } />
})