Javascript ReactJS：预期 onClick 侦听器是一个函数，而不是类型字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35870976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS: Expected onClick listener to be a function, instead got type string
提问by ppalmeida
I can't figure out why ReactJs is finding "string" instead of my click handler methods.
我不明白为什么 ReactJs 会找到“字符串”而不是我的点击处理程序方法。
This is my code:
这是我的代码：
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>
);
}
});
});
});
I already tried to use
我已经尝试使用
var _this = _this
// ....
<li onClick="_this.pageUp" ...
and binds like
并像这样绑定
<li onClick="{this.pageUp.bind(this)}"
But when I refresh the page, I always get this error:
但是当我刷新页面时，我总是收到这个错误：
The error I get is:
我得到的错误是：
Error: Expected onClick listener to be a function, instead got type string(…)
Any help is much appreciate.
非常感谢任何帮助。
tks
tks
回答by nbermudezs
You need to remove the quotes. <li onClick={this.pageUp.bind(this)}>...
您需要删除引号。 <li onClick={this.pageUp.bind(this)}>...
In vanilla javascript you would probably have onclick="somefunctionname". But not in JSX, you need to pass a function as stated in the error.
在 vanilla javascript 中，您可能会有onclick="somefunctionname". 但不是在 JSX 中，您需要传递错误中所述的函数。
Also, the .bind(this)is not necessary if you are using React.createClass. Once you have removed the quotes, you will probably get a warning stating that is not necessary since React does that for you.
此外，.bind(this)如果您使用的是React.createClass. 一旦你删除了引号，你可能会收到一个警告，说明这不是必需的，因为 React 会为你做这件事。
回答by shashikant tripathi
I know it is a bit late but still want to answer the questions for others.
我知道现在有点晚了，但还是想回答其他人的问题。
Remove ""after onClick.
""后删除onClick。
For example: change onClick="{this.pageUp}"to onClick={this.pageUp}.
例如：更改onClick="{this.pageUp}"为onClick={this.pageUp}.
回答by Ignatius Andrew
Another scenario this might happen is when you are calling the action method from an onClick event, if you miss the function representation part like...
另一种可能发生的情况是当您从 onClick 事件调用操作方法时，如果您错过了函数表示部分，例如...
<button onClick = {this.props.increment('INCREMENT')}>+</button>
instead
反而
<button onClick = {()=>this.props.increment('INCREMENT')}>+</button>
the ()=>{}is important to tell your onClickevent that it is a function.
在（）=> {}重要的是要告诉你的onClick事件，这是一个功能。
回答by Nawab Ali
It can be because of the parentheses with the function u are using for onClick i.e. onClick = { aFtn() }. This is wrong cause the parentheses directly calls the function on render instead of waiting till the click i.e. onClick. Solution is just to remove these parentheses like onClick = { aFtn }. Good Luck!
这可能是因为您用于 onClick 的函数带有括号，即 onClick = { aFtn() }。这是错误的，因为括号直接在渲染时调用函数，而不是等到点击即 onClick。解决方案只是删除这些括号，如 onClick = { aFtn }。祝你好运！
回答by Vengatesh
Use like below
使用如下
onClick={this.functionName}
