React.js-组件作为CommonJS模块-事件不起作用

Question

I'm in the very early phase of learning React.js. I'm trying to learn how to modularize React.js components.

I make a React.js component as a CommonJS module, and when I invoke it from other module - all seem to work except that the events doesn't seem to bind to the view when the component re-renders after a state change.

I've place my code at the end.

I've placed the code for TestComponent in a file name component.jspx . Then I use the component from app.js

Per the code in TestComponent , the component on it's initialState will have two list-items (with a button that triggers an event).

Then on componentDidMount , I change the state with an additional data.

The component renders properly - except that the event handleClickEvenet doesn't seem to get bound for the updated view.

Please help me understand how to fix this problem.

// 
// component.jsx

var TestComponent =React.createClass({

    handleClickEvent: function() {
        alert ('Clicked...');
    },

    getInitialState: function() {
        return {
            comments: [
                {author: 'A1', comment: 'Comment by A1'},
                {author: 'A2', comment: 'Comment by A2'}
            ]
        };
    },

    componentDidMount: function() {
        var comments = this.state.comments;
        comments.push({author: 'A3', comment: 'Comment by A3'});
        this.setState({comments: comments});
    },

    render: function() {
        var thisComponent = this;
        return (
                <ol>
                    {
                        this.state.comments.map (function(comment, i) {
                            return (
                                    <li>
                                        {comment.comment} | {comment.author} |
                                        <button onClick={thisComponent.handleClickEvent}>Click me</button>
                                    </li>
                                    )
                        })
                    }
                </ol>
        )
    }
})

module.exports = TestComponent;


// -------
// app.js
// -------

var CommentBox = require('./components/Demo.jsx');
var React = require('../components/react/react-with-addons.js');

var commentBox = React.createElement(CommentBox, data);
React.render(commentBox, document.body);

Answer 1

Tested out the stuff you supplied, since it actually looks as it should.

Doing a few minor changes to it so it could execute in jsfiddle, it should look like this ( jsfiddle ):

var CommentBox = React.createClass({

    handleClickEvent: function() {
        alert ('Clicked...');
    },

    getInitialState: function() {
        return {
            comments: [
                {author: 'A1', comment: 'Comment by A1'},
                {author: 'A2', comment: 'Comment by A2'}
            ]
        };
    },

    componentDidMount: function() {
        var comments = this.state.comments;
        comments.push({author: 'A3', comment: 'Comment by A3'});
        this.setState({comments: comments});
    },

    render: function() {
        var thisComponent = this;
        return (
                <ol>
                    {
                        this.state.comments.map (function(comment, i) {
                            return (
                                    <li>
                                        {comment.comment} | {comment.author} |
                                        <button onClick={thisComponent.handleClickEvent}>Click me</button>
                                    </li>
                                    )
                        })
                    }
                </ol>
        )
    }
});

var commentBox = React.createElement(CommentBox, {});
React.render(commentBox, document.body);

I guess the problem is something minor and is nothing big. Test what you done using the supplied jsfiddle and consider simplifying your setup until it works and take it from there.

Have a good bug hunt :)