JavaScript无法在事件处理程序中访问React实例（this）

一尘不染

JavaScript无法在事件处理程序中访问React实例（this）

javascript

我正在用ES6（使用BabelJS）编写一个简单的组件，并且功能this.setState无法正常工作。

典型的错误包括类似

无法读取未定义的属性“ setState”

要么

this.setState不是一个函数

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

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

阅读 311

2020-04-23

共1个答案

一尘不染

this.changeContent``this.changeContent.bind(this)在作为onChangeprop
传递之前，需要先通过绑定到组件实例，否则this函数主体中的变量将不会引用组件实例，而是指向window。参见Function ::
bind。

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

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

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

与

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

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

2020-04-23