React.js - 作爲CommonJS模塊的組件 - 事件不起作用

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測試你做了什麼，並考慮簡化你的設置，直到它工作並從那裏取出。

有一個很好的錯誤狩獵:)