无法访问事件处理程序中的Reaction实例(此)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (12)

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

典型的错误包括

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

setState不是函数

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需要通过this.changeContent.bind(this)作为onChange道具,否则this变量将不引用组件实例,而是引用window。

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

请注意,绑定函数会创建一个新函数。可以直接在Render中绑定它,这意味着每次组件呈现时都会创建一个新函数,或者在构造函数中绑定它,构造函数只会触发一次。

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

VS

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

在组件实例上设置的,而不是在React.refs::你需要改变React.refs.somerefthis.refs.someref,还需要绑定sendContent方法对组件实例执行this提到它。

用户回答回答于

可以使用箭头函数连同类属性提案:

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

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

因为箭头函数是在构造函数的作用域中声明的,而且因为箭头函数维护this从他们的声明范围来看,这一切都是可行的。这里的缺点是这些不是原型上的函数,它们都将用每个组件重新创建。然而,这并不是什么坏处,因为bind结果也是一样的。

扫码关注云+社区