Question

我正在学习Reactjs。假设我有一个按钮，在这个按钮上我会触发一个事件。但不知何故，这个事件总是称事件我不点击任何东西。以下是我的代码你能帮帮我吗？假设我使用Ajax调用api，在更新UI时使用数据。在UI中我有一个按钮，它也会触发一个事件。

"use strict";

var Movie = React.createClass({
    displayName: "Movie",

    getInitialState: function getInitialState() {
        return {
            movie_sessions: this.props.movie_session,
            movie: this.props.movie,
            rooms: this.props.rooms
        };
    },

    render: function render() {
        return React.createElement(
            "div",
            { style: column },
            React.createElement(
                "a",
                null,
                this.state.movie.name
            ),
            React.createElement(
                "div",
                { style: slide },
                React.createElement(
                    "ul",
                    null,
                    this.state.movie_sessions.map(function (movie_session) {
                        return React.createElement(MovieSession, {
                            key: movie_session.id,
                            room_id: movie_session.room_id,
                            date_time: movie_session.date_time
                        });
                    })
                )
            ),
            React.createElement(
                "div",
                { style: main },
                React.createElement(Seats, null)
            )
        );
    }
});

var MovieSession = React.createClass({
    displayName: "MovieSession",

    loadRoomFromServer: function loadRoomFromServer() {
        $.ajax({
            url: "/rooms/" + this.state.room_id + ".json",
            dataType: 'json',
            success: function (data) {
                this.setState({ room: data });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    loadSeatFromServer: function loadSeatFromServer() {
        console.log("click");
        $.ajax({
            url: "/seats.json",
            dataType: 'json',
            success: function (data) {
                //I want to update state for Seat
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }
        });
    },
    getInitialState: function getInitialState() {
        return {
            key: this.props.key,
            room_id: this.props.room_id,
            date_time: this.props.date_time
        };
    },
    componentDidMount: function componentDidMount() {
        this.loadRoomFromServer();
        setInterval(this.loadRoomFromServer, 2000);
    },

    render: function render() {
        if (this.state.room) {
            return React.createElement(
                "div",
                null,
                React.createElement(
                    "li",
                    null,
                    this.state.room.name,
                    " "
                ),
                React.createElement(
                    "p",
                    null,
                    "  ",
                    this.state.date_time
                ),
                React.createElement(
                    "button",
                    {onclick: this.loadSeatFromServer()},
                    "Choose"
                )
            );
        } else {
            return React.createElement(
                "h3",
                null,
                "loading"
            );
        }
    }
});

Answer 1

您应该只在onClick事件中分配方法的引用

，而不是调用方法

 React.createElement(
                "button",
                {onclick: this.loadSeatFromServer},  
                "Choose"
            )

Answer 2

您的代码中有两个错误。事件处理程序应该是camelCase，例如onClick代替小写onclick;并且，正如Phi Nguyen指出的那样，你应该传递函数本身，而不是函数调用的结果。

React.createElement(
    "button",
    {onClick: this.loadSeatFromServer},  
    "Choose"
)

在原始代码中，您通过调用loadSeatFromServer执行loadSeatFromServer()，然后将返回值undefined分配给从未使用的道具onclick。

在正确的代码中，您不执行loadSeatFromServer（函数名后面没有()），而是将函数本身分配给标准事件处理程序prop onClick - 以及何时单击该组件，React将执行它。

Answer 3

这是绑定你想要的对象的最佳解决方案

self = this

...

onClick={self.coolFunction.bind(this)}

和

coolFunction() {
    console.log(this.someDataInside);
}

Answer 4

首先改变这个： ... loadSeatFromServer: function loadSeatFromServer() { ... }, ...

到

loadSeatFromServer: function() { ... },

第二个：


React.createElement(
                    "button",
                    {onclick: this.loadSeatFromServer()},
                    "Choose"
                )

到

React.createElement( "button", {onclick: this.loadSeatFromServer}, "Choose" )

Reactjs，onclick函数是自动触发

4 个答案: