在es6类中反应'这个'上下文

使用ReactJS的es6方法与类中的方法中的'this'关键字的上下文混淆

这给出了一个错误,无法获得未定义的引用

class AddItem extends React.Component {
    constructor() {
        super();
    }
    addIt(e) {
        e.preventDefault();
        let newItem = {
            title: this.refs.title.value
        }
        this.refs.feedForm.reset();
        this.props.addItem(newItem);
    }
    render() {
        return (
            

              

                

                  Title:
                  
                
                Add Item
              
            
        );
    }
}

但这似乎工作正常

class AddItem extends React.Component {
    constructor() {
        super();
        this.addIt = function(e) {
            e.preventDefault();

            let newItem = {
                title: this.refs.title.value
            }

            this.refs.feedForm.reset();
            this.props.addItem(newItem);
        }.bind(this)
    }

    render() {
        return (
            

              

                

                  Title:
                  
                
                Add Item
              
            
        );
    }
}

我在第一个做错了什么

当您使用ES6类创建React组件时,您需要手动绑定this事件处理程序,

class AddItem extends React.Component {
  constructor() {
    super();
  }

  addIt(e) {
     // other code
  }

  render() {
    return 

      

        // other code
      
    
  }
}

或者更好的设置this中constructor,

class AddItem extends React.Component {
  constructor() {
    super();
    this.addIt = this.addIt.bind(this);
  }
  // other code
}