ReactJS: onClick侦听器应为函数，但获得的类型为字符串
ReactJS: onClick侦听器应为函数，但获得的类型为字符串
提问于 2016-03-08 23:09:37
我不明白为什么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
回答 5
Stack Overflow用户
发布于 2016-03-09 00:25:45
您需要删除引号。<li onClick={this.pageUp.bind(this)}>...
在普通的javascript中，你可能会有onclick="somefunctionname"。但在JSX中不是这样，您需要按照错误中的说明传递一个函数。
此外，如果您使用的是React.createClass，则不需要.bind(this)。一旦你删除了引号，你可能会收到一条警告，说明这是不必要的，因为React会为你做这件事。
Stack Overflow用户
发布于 2017-04-17 09:44:59
我知道现在有点晚了，但我仍然想为其他人回答问题。
在onClick之后删除""。
例如:将onClick="{this.pageUp}"更改为onClick={this.pageUp}。
Stack Overflow用户
发布于 2020-02-22 17:42:55
这可能是因为函数u使用圆括号表示onClick，即onClick ={ aFtn() }。这是错误的，因为括号在渲染时直接调用函数，而不是等到单击，即onClick。解决方案就是删除这些括号，如onClick ={ aFtn }。祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35870976
复制相关文章
相似问题