无法在事件处理程序中访问React实例（this） [英] Unable to access React instance (this) inside event handler

问题描述

我正在ES6中编写一个简单的组件（使用BabelJS），函数 this.setState 不起作用。

典型错误包括

无法读取未定义的属性setState

或

this.setState是不是功能

你知道为什么吗？这里是代码：

  import'reaction'的反应
 
 class SomeClass extends React.Component { 
构造函数（道具）{
 super（props）
 this.state = {inputContent：'startValue'} 
} 
 
 sendContent（e）{ 
 console.log（'发送输入内容'+ React.findDOMNode（React.refs.someref）.value）
} 
 
 changeContent（e）{
 this .setState（{inputContent：e.target.value}）
} 
 
 render（）{
 return（
< div> 
< h4>输入表单为：< / h4> 
标题：
< input type =textref =somerefvalue = {this.inputContent} 
 onChange = { this.changeContent} /> 
< button onClick = {this.sendContent}>提交< / button> 
< / div> 
）
} 
} 
 
导出默认SomeClass 
  

解决方案

this.c hangeContent 需要通过 this.changeContent.bind（this）绑定到组件实例，然后作为 onChange prop，否则函数正文中的这个变量不会引用组件实例，而是窗口。请参阅 Function :: bind 。

当使用 React.createClass 而不是ES6类时，组件上定义的每个非生命周期方法都将自动绑定到组件实例。请参阅自动绑定。

请注意绑定一个函数会创建一个新的函数。您可以直接在render中绑定，这意味着每次组件呈现时都会创建一个新的函数，或者将其绑定到构造函数中，该构造函数只会触发一次。

  constructor（）{
 this.changeContent = this.changeContent.bind（this）; 
} 
  

vs

  render（）{
 return< input onChange = {this.changeContent.bind（this）} /> ;; 
} 
  

---

组件实例，而不在 React.refs ：您需要将 React.refs.someref 更改为 this.refs.someref 。您还需要将 sendContent 方法绑定到组件实例，以便此引用它。

I am writing a simple component in ES6 (with BabelJS), and functions this.setState is not working.

Typical errors include something like

Cannot read property 'setState' of undefined

or

this.setState is not a function

Do you know why? Here is the code:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

解决方案

this.changeContent needs to be bound to the component instance via this.changeContent.bind(this) before being passed as the onChange prop, otherwise the this variable in the body of the function will not refer to the component instance but to window. See Function::bind.

When using React.createClass instead of ES6 classes, every non-lifecycle method defined on a component is automatically bound to the component instance. See Autobinding.

Be aware that binding a function creates a new function. You can either bind it directly in render, which means a new function will be created every time the component renders, or bind it in your constructor, which will only fire once.

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

vs

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

---

Refs are set on the component instance and not on React.refs: you need to change React.refs.someref to this.refs.someref. You'll also need to bind the sendContent method to the component instance so that this refers to it.

这篇关于无法在事件处理程序中访问React实例（this）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！