我不明白为什么ReactJs会找到"string“而不是我的click处理方法。
这是我的代码:
define(["react"], function(React) {
return React.createClass({
pageUp: function() {
console.log("go next page");
},
pageDown: function() {
console.log("go prev page");
},
toggleMenu: function() {
console.log("toggle menu");
this.state.menuStatus = !this.menuStatus;
},
getInitialState: function() {
return {
// Toggle menu status; false -> closed | true -> opened
menuStatus: false
}
},
render: function() {
var _this = this;
return (
<div className="overlay-nav">
<ul className="up-down-arrows">
<li onClick="{this.pageUp}" className="arrow-up"><i className="fa fa-angle-up"></i></li>
<li onClick="{_this.pageDown.bind(_this)}" className="arrow-down"><i className="fa fa-angle-down"></i></li>
</ul>
<div onClick="{_this.toggleMenu}" className="toggleMenu"><i className="fa fa-bars"></i></div>
</div>
);
}
});
});
我已经试过用
var _this = _this
// ....
<li onClick="_this.pageUp" ...
并像这样绑定
<li onClick="{this.pageUp.bind(this)}"
但是当我刷新页面时,我总是得到这样的错误:
我得到的错误是:
Error: Expected onClick listener to be a function, instead got type string(…)
任何帮助都是非常感谢的。
tks
发布于 2016-03-09 00:25:45
您需要删除引号。<li onClick={this.pageUp.bind(this)}>...
在普通的javascript中,你可能会有onclick="somefunctionname"
。但在JSX中不是这样,您需要按照错误中的说明传递一个函数。
此外,如果您使用的是React.createClass
,则不需要.bind(this)
。一旦你删除了引号,你可能会收到一条警告,说明这是不必要的,因为React会为你做这件事。
发布于 2017-04-17 09:44:59
我知道现在有点晚了,但我仍然想为其他人回答问题。
在onClick
之后删除""
。
例如:将onClick="{this.pageUp}"
更改为onClick={this.pageUp}
。
发布于 2020-02-22 17:42:55
这可能是因为函数u使用圆括号表示onClick,即onClick ={ aFtn() }。这是错误的,因为括号在渲染时直接调用函数,而不是等到单击,即onClick。解决方案就是删除这些括号,如onClick ={ aFtn }。祝好运!
https://stackoverflow.com/questions/35870976
复制相似问题