ReactJS：期望 onClick 侦听器是一个函数，而不是类型字符串答案

【问题标题】：ReactJS: Expected onClick listener to be a function, instead got type stringReactJS：期望 onClick 侦听器是一个函数，而不是类型字符串
【发布时间】：2016-03-08 15:09:36
【问题描述】：

我不明白为什么 ReactJs 会找到“字符串”而不是我的点击处理程序方法。

这是我的代码：

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

【问题讨论】：

您需要删除引号。 <li onClick={this.pageUp.bind(this)}>...
在原版 javascript 中，您可能会有 onclick="somefunctionname"。但不是在 JSX 中，你需要传递错误中所述的函数
另外，如果你使用 React.createClass，.bind(this) 不是必需的，一旦你删除了引号，你可能会收到一个警告，说明这是不必要的，因为 React 会为你这样做。
@nbermudezs 您应该将其发布为答案:)
@rossipedia 我刚刚做了。谢谢:)

标签： javascript reactjs react-jsx

【解决方案1】：

您需要删除引号。 <li onClick={this.pageUp.bind(this)}>...

在原版 javascript 中，您可能会有 onclick="somefunctionname"。但不是在 JSX 中，您需要传递错误中所述的函数。

此外，如果您使用的是React.createClass，则不需要.bind(this)。一旦你删除了引号，你可能会收到一个警告，说明这不是必需的，因为 React 会为你这样做。

【讨论】：

【解决方案2】：

我知道有点晚了，但还是想为别人解答问题。

在onClick 之后删除""。

例如：将onClick="{this.pageUp}"更改为onClick={this.pageUp}。

【讨论】：

【解决方案3】：

这可能发生的另一种情况是，当您从 onClick 事件调用操作方法时，如果您错过了函数表示部分，例如...

<button onClick = {this.props.increment('INCREMENT')}>+</button>

改为

<button onClick = {()=>this.props.increment('INCREMENT')}>+</button>

()=>{} 对于告诉您的 onClick 事件它是一个函数很重要。

【讨论】：

【解决方案4】：

这可能是因为您在 onClick 中使用的函数的括号，即 onClick = { aFtn() }。这是错误的，因为括号直接调用渲染上的函数，而不是等到点击，即 onClick。解决方案只是删除这些括号，如 onClick = { aFtn }。祝你好运！

【讨论】：

【解决方案5】：

-> React 事件使用 camelCase 命名，而不是小写。 -> 使用 JSX，你可以传递一个函数作为事件处理程序，而不是一个字符串。

例如 HTML：

<button onclick="activateLasers()">
  Activate Lasers
</button>

在 React 中略有不同：

<button onClick={activateLasers}>
  Activate Lasers
</button>

Soure:- https://reactjs.org/docs/handling-events.html

【讨论】：

【解决方案6】：

像下面这样使用

onClick={this.functionName}

【讨论】：

【解决方案7】：

尝试创建箭头函数，将它们分配给变量，然后将这些变量名称作为 onClick 处理程序在 {} 之间传递，而不是使用内联函数。这对我有用。

【讨论】：