Question

我正处于学习React.js的早期阶段。我正在尝试学习如何模块化React.js组件。

我将一个React.js组件作为一个CommonJS模块，当我从其他模块调用它时 - 一切似乎都有效，除了当一个状态后组件重新渲染时事件似乎没有绑定到视图变化

我将代码放在最后。

我已将TestComponent的代码放在文件名component.jspx中。然后我使用app.js

中的组件

根据TestComponent中的代码，它的initialState上的组件将有两个列表项（带有触发事件的按钮）。

然后在componentDidMount上，我使用其他数据更改状态。

组件正确呈现 - 除了事件handleClickEvenet似乎没有绑定更新的视图。

请帮助我了解如何解决此问题。

// 
// 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

测试了你提供的东西，因为它实际上看起来应该是这样。

对它进行一些小改动，以便它可以在jsfiddle中执行，它应该如下所示（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);

我想这个问题很小，而且没什么大问题。使用提供的jsfiddle测试你所做的事情，并考虑简化你的设置，直到它工作并从那里开始。

有一个好的bug追捕：）

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

1 个答案: