React JS: on Click 청취자가 함수여야 하지만 형식 문자열이 필요합니다.

React JS: on Click 청취자가 함수여야 하지만 형식 문자열이 필요합니다.

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(…)

어떤 도움이라도 감사합니다.

째깍째

따옴표를 삭제해야 합니다. <li onClick={this.pageUp.bind(this)}>...

바닐라 javascript에서는 아마 다음과 같이 됩니다.onclick="somefunctionname"그러나 JSX에서는 오류에 기재된 함수를 전달해야 합니다.

또,.bind(this)를 사용하고 있는 경우는 필요 없습니다.React.createClass. 견적을 삭제하면 React에서 삭제하므로 불필요하다는 경고가 나타날 수 있습니다.

조금 늦은 건 알지만 다른 사람들을 위해 질문에 답하고 싶어요.

제거한다.""끝나고onClick.

예: 변경onClick="{this.pageUp}"로.onClick={this.pageUp}.

이러한 상황이 발생할 수 있는 또 다른 시나리오는 onClick 이벤트에서 액션 메서드를 호출할 때 다음과 같은 함수 표현 부분을 놓치는 경우입니다.

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

대신

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

()=>{}은(는) 중요한 정보입니다.onClick함수가 되는 이벤트입니다.

onClick에 사용 중인 함수가 포함된 괄호(예: onClick = { aFtn() ) 때문일 수 있습니다. 이는 괄호가 클릭할 때까지 기다리지 않고 렌더에서 함수를 직접 호출하기 때문입니다.해결책은 onClick = { aFtn }과(와) 같은 괄호를 제거하는 것입니다.행운을 빕니다.

-> 반응 이벤트의 이름은 소문자가 아닌 camel Case를 사용합니다.-> JSX 에서는 문자열이 아닌 이벤트핸들러로서 함수를 전달합니다.

예를 들어 HTML은 다음과 같습니다.

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

React는 약간 다릅니다.

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

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

아래와 같이 사용

onClick={this.functionName}

인라인 함수를 사용하는 대신 화살표 함수를 만들어 변수에 할당하고 변수 이름을 onClick 핸들러로 {} 사이에 전달해 보십시오.이건 나한테 효과가 있었어.

언급URL : https://stackoverflow.com/questions/35870976/reactjs-expected-onclick-listener-to-be-a-function-instead-got-type-string