我正在ES6中编写一个简单的组件(使用BabelJS),并函数此。setState不工作。

典型的错误包括

无法读取undefined的属性“setState”

or

这一点。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

当前回答

如果你想在构造函数语法中保留bind,你可以使用proposal-bind-operator并像下面这样转换你的代码:

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

而不是:

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

更简单,不需要bind(this)或fatArrow。

其他回答

你好,如果你不想关心绑定你自己的函数调用。你可以使用'class-autobind'然后像这样导入它

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

不要在super调用之前写autobind,因为它将不起作用

这一点。在作为onChange道具传递之前,changeContent需要通过this.changeContent.bind(this)绑定到组件实例,否则函数体中的this变量将不会指向组件实例,而是指向窗口。看到函数::绑定。

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

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

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

vs

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

引用设置在组件实例上,而不是在React上。refs:你需要将react .ref .someref改为this.ref .someref。您还需要将sendContent方法绑定到组件实例,以便该方法引用它。

如果你想在构造函数语法中保留bind,你可以使用proposal-bind-operator并像下面这样转换你的代码:

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

而不是:

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

更简单,不需要bind(this)或fatArrow。

我的建议是使用箭头函数作为属性

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

不要使用箭头函数

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

因为第二种方法每次渲染调用都会生成新函数,实际上这意味着新指针和新版本的道具,如果你以后会关心性能,你可以使用React。PureComponent或React中。组件你可以覆盖shouldComponentUpdate(nextProps, nextState)和浅检查道具到达时

Morhaus是正确的,但这个问题可以不受约束地解决。

你可以将箭头函数与类属性建议一起使用:

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

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

因为箭头函数是在构造函数的作用域中声明的,而且因为箭头函数从它们的声明作用域中维护这一点,所以一切都可以正常工作。这里的缺点是这些不会是原型上的函数,它们都将与每个组件一起重新创建。然而,这并不是什么缺点,因为绑定也会产生同样的结果。