Question

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

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;

Answer 1

我做错了吗？

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

简化示例（使用对象）：

this

相关：

How does the "this" keyword work?

How to access the correct `this` context inside a callback?

Unable to access React instance (this) inside event handler

<强>文档

MDN - this

YDKJS - this or That?

Answer 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更清洁。

希望有所帮助。

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

2 个答案: