我在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;
答案 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更清洁。
希望有所帮助。