Reactjs，onclick函数是自动触发的

Question

我正在学习 Reactjs。假设我有一个按钮，我在这个按钮上触发一个事件。但不知怎的，这个事件总是调用事件我不点击任何东西。下面是我的代码，你能帮我吗？假设我使用 Ajax 调用 api，当有数据时我更新 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"
            )