Question

我无法弄清楚为什么ReactJs会发现＆＃34; string＆＃34;而不是我的点击处理程序方法。

这是我的代码：

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

Answer 1

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

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

此外，如果您使用.bind(this)，则无需React.createClass。删除引号后，您可能会收到一条警告，说明没有必要，因为React会为您执行此操作。

Answer 2

我知道这有点晚了但仍想回答其他人的问题。

在""后删除onClick。

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

Answer 3

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

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

代替

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

（）=＆gt; {} 对于告诉您的onClick事件它是一个函数非常重要。

Answer 4

可能是因为括号中有u用于onClick的功能，即onClick = {aFtn（）}。这是错误的，因为括号直接在render上调用了该函数，而不是等到单击即onClick为止。解决方案只是删除这些括号，例如onClick = {aFtn}。祝好运！

Answer 5

使用如下方式

onClick={this.functionName}

Answer 6

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

例如，HTML：

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

在React中略有不同：

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

安全性：-https://reactjs.org/docs/handling-events.html

ReactJS：预期onClick监听器是一个函数，而不是类型字符串

6 个答案: