web-dev-qa-db-ja.com

ReactJS：onClickリスナーが関数であることが期待され、代わりに型文字列が取得されました

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

javascriptreactjsreact-jsx
31
ppalmeida

引用符を削除する必要があります。 <li onClick={this.pageUp.bind(this)}>...

バニラジャバスクリプトでは、おそらく_onclick="somefunctionname"_を持っているでしょう。ただし、JSXではなく、エラーに示されている関数を渡す必要があります。

また、_React.createClass_を使用している場合、.bind(this)は不要です。引用符を削除すると、おそらくReactはあなたのためにそれを行うので、必要ではないという警告が表示されます。

55
nbermudezs

私はそれが少し遅れていることを知っていますが、それでも他人のために質問に答えたいです。

削除する ""onClickの後。

例：change onClick="{this.pageUp}"からonClick={this.pageUp}。

18
shashikant tripathi

これが発生する可能性がある別のシナリオは、onClickイベントからアクションメソッドを呼び出しているときに、次のような関数表現部分を見逃した場合です...

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

代わりに

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

（> {}）==は、onClickイベントが関数であることを伝えるために重要です。

4
Ignatius Andrew