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

小编典典

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

all

我正在用 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

阅读 71

2022-05-30

共1个答案

小编典典

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

当使用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引用它。

2022-05-30