反应：“ this”在组件函数中未定义

我想在切换时更新loopActive状态，但是在处理程序中未定义this对象。根据教程文档，我this应该引用该组件。我想念什么吗？

#1 楼

ES6 React.Component不会自动将方法绑定到自身。您需要将自己绑定在constructor中。像这样：

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

如果将onToggleLoop函数移到您的react类中之后，将onClick属性更改为（）=> this.onToggleLoop，它也将正常工作。

–山姆
16年8月26日在18:50

您真的必须绑定每个react类的每个方法吗？那不是有点疯狂吗？

– Alex L
16-10-5在19:37

@AlexL有一些方法可以不显式绑定方法。如果您使用babel，则可以将React组件上的每个方法声明为箭头函数。这里有示例：babeljs.io/blog/2015/06/07/react-on-es6-plus

–伊凡
16-10-6在20:11

但是，为什么这首先是不确定的？我知道在Javascript中这取决于函数的调用方式，但是这里发生了什么？

–darKnight
18年1月3日在16:26

但是我该怎么办呢？直到构造函数之后才定义函数？如果我尝试在构造函数中执行此操作，即使您在类上定义了我的函数，也会得到“无法读取未定义的属性'bind'的信息：

–rex
18年1月15日在17:01

#2 楼

有两种方法。

一种是在构造函数中添加
this.onToggleLoop = this.onToggleLoop.bind(this);。

另一个是箭头功能
onToggleLoop = (event) => {...}。

然后是onClick={this.onToggleLoop.bind(this)}。

为什么onToogleLoop =（）=> {}起作用？我遇到了同样的问题，我在构造函数中绑定了它，但是没有起作用...现在我已经看到了您的帖子，并用箭头函数语法替换了我的方法，它可以工作。你能跟我解释一下吗？

– Guchelkaben
17年9月15日在6:51

来自developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/…；箭头函数不会创建自己的this，而是使用封闭执行上下文的this值。

– J. Mark Stevens
17年9月15日在16:34

请注意，在onClick中绑定内联会在每次渲染时返回一个新函数，因此看起来好像已经为prop传递了一个新值，从而使PureComponents中的shouldComponentUpdate混乱了。

–忍者观音
18年5月25日在11:34

#3 楼

这样编写函数：

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

胖箭头函数

关键字的绑定外部和内部相同粗箭头功能。这与用function声明的函数不同，后者可以在调用时将其绑定到另一个对象。维护this绑定对于诸如映射这样的操作非常方便：this.items.map（x => this.doSomethingWith（x））。

如果这样做，我将得到ReferenceError：当前不支持字段。

– Pavel Komarov
19年6月25日在18:01

如果在构造函数内部我说this.func =（）=> {...}，它就可以工作，但是我认为这有点愚蠢，并且希望尽可能避免它。

– Pavel Komarov
19-6-25在18:54

太可怕了，您不能在React中使用普通的类语法！

–科科多科
19年7月10日在16:46

#4 楼

我在render函数中遇到了类似的绑定，并最终通过以下方式传递了this的上下文：

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

我也使用过：

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

每次渲染列表时，在此创建的很多不必要的功能...

– T.J.拥挤者
18年2月8日在18:38

@ T.J.Crowder是的，的确如此，每次调用render时都会重新创建这些函数。最好将这些函数创建为类方法，并将它们一次绑定到类，但是对于初学者而言，手动上下文绑定可能会有所帮助

– duhaime
18年2月8日在19:16

#5 楼

您应该注意到，this取决于函数的调用方式
，即：当将函数作为对象的方法调用时，其this设置为调用该方法的对象。

在JSX上下文中可以将this作为组件对象进行访问，因此您可以将内联的所需方法称为this方法。

如果仅将引用传递给函数/方法，似乎react将以独立的方式调用它功能。

onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object

没错，您甚至可以使用第一行，即onClick = {this.onToggleLoop}，前提是您在组件类中使用'this'* //

–gvlax
19-09-12在10:12

#6 楼

如果您使用的是Babel，则可以使用ES7绑定运算符
来绑定'this'
https://babeljs.io/docs/en/babel-plugin-transform-function-bind#auto-self-binding-

export default class SignupPage extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault(); 

    const data = { 
      email: this.refs.email.value,
    } 
  }

  render() {

    const {errors} = this.props;

    return (
      <div className="view-container registrations new">
        <main>
          <form id="sign_up_form" onSubmit={::this.handleSubmit}>
            <div className="field">
              <input ref="email" id="user_email" type="email" placeholder="Email"  />
            </div>
            <div className="field">
              <input ref="password" id="user_password" type="new-password" placeholder="Password"  />
            </div>
            <button type="submit">Sign up</button>
          </form>
        </main>
      </div>
    )
  }

}

#7 楼

如果在生命周期方法（例如componentDidMount ...）中调用创建的方法，则只能使用this.onToggleLoop = this.onToogleLoop.bind(this)和胖箭头函数onToggleLoop = (event) => {...}。

构造函数中函数声明的常规方法不会之所以起作用，是因为生命周期方法被更早地调用了。

#8 楼

就我而言，这就是解决方案=（）=> {}

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

#9 楼

在我的情况下，对于使用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} } />
})

#10 楼

您可以重写从render（）方法调用onToggleLoop方法的方式。

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文档显示了从属性表达式调用函数的这种模式。

编程黑洞网