调用处理程序时,未定义React组件`this`

时间:2016-06-27 06:14:17

标签: reactjs

我在JSX中附加了一个简单的处理程序。除非我在JSX中.bind(this),否则当我进入change方法时,this.setState()thisundefined。我做错了吗?

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import CounterConstants from './../constants/constants';
import AppDispatcher from './../dispatcher/AppDispatcher';
import CounterActions from './../actions/actions';

class Controls extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todoText: ''
    };
  }
  change(event){
    this.setState({todoText: event.target.value});
  }
  submit(event){
    if(this.state.todoText !== ''){
      CounterActions.addTodo({text: this.state.todoText});
      this.setState({todoText: ''});
    }
  }
  render(){
    return (
      <div className="controls form-inline">
        <input type="text" name="todoText" className="form-control" onChange={this.change.bind(this)} value={this.state.todoText} />
        <button className="btn btn-primary" onClick={this.submit.bind(this)}>Add a todo</button>
      </div>
    )
  }
}

export default Controls;

2 个答案:

答案 0 :(得分:2)

  

我做错了吗?

不,这就是JavaScript的工作方式。函数不是自动绑定的。 var wnd = window.open("about:blank", ""); wnd.document.write(htmlString); wnd.document.close(); 的值取决于函数的调用方式。因此,如果您在某处传递函数但需要this来获得特定值,则必须自己绑定它(注意:其中绑定函数无关紧要。)

简化示例(使用对象):

this

相关:

<强>文档

答案 1 :(得分:2)

由于您使用的是es6类(this),因此函数不会自动绑定。为了向您的函数提供上下文,您需要将React.createClass的值绑定到组件的上下文。

如果你要使用this,那么默认情况下所有函数都会自动绑定。

大多数人使用构造函数将其函数绑定到npm ERR! install Couldn't read dependencies npm ERR! Darwin 15.2.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "." npm ERR! node v4.4.6 npm ERR! npm v2.15.5 npm ERR! code EISDIR npm ERR! errno -21 npm ERR! syscall read npm ERR! eisdir EISDIR: illegal operation on a directory, read npm ERR! eisdir This is most likely not a problem with npm itself npm ERR! eisdir and is related to npm not being able to find a package.json in npm ERR! eisdir a package you are trying to install. 的上下文。它比混乱JSX更清洁。

希望有所帮助。