无法在事件处理程序中访问 React 实例(this)

2022-01-29 00:00:00 reactjs javascript ecmascript-6 babeljs

我正在用 ES6(使用 BabelJS)编写一个简单的组件，并且函数 this.setState 不起作用.

典型错误包括类似

<块引用>

无法读取未定义的属性setState"

或

<块引用>

this.setState 不是函数

你知道为什么吗?代码如下:

从'react'导入反应类 SomeClass 扩展 React.Component {构造函数(道具){超级(道具)this.state = {inputContent: 'startValue'}}发送内容(e){console.log('发送输入内容'+React.findDOMNode(React.refs.someref).value)}更改内容(e){this.setState({inputContent: e.target.value})}使成为() {返回 (
<h4>输入形式在这里:</h4>标题:

解决方案

this.changeContent 需要通过 this.changeContent.bind(this) 绑定到组件实例，然后作为 onChange 传递prop，否则函数体中的 this 变量将不会引用组件实例，而是引用 window.请参阅 Function::bind.

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

请注意，绑定函数会创建一个新函数.你可以直接在 render 中绑定它，这意味着每次组件渲染时都会创建一个新函数，或者在你的构造函数中绑定它，它只会触发一次.

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

对

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

<小时>

Refs 是在组件实例而不是 React.refs 上设置的:您需要将 React.refs.someref 更改为 this.refs.someref.您还需要将 sendContent 方法绑定到组件实例，以便 this 引用它.

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.

相关文章