狀態改變後更新div渲染

Question

新手在這裏反應。

我有一個reactjs元素<PlayStopBtn/>應該基本上只是在每次點擊時切換顯示開始或停止。我的反應元素看起來是這樣的：

var PlayStopBtn = React.createClass({ 
    getInitialState: function() { 
     return {data: null}; 
    }, 
    onClick: function(event) { 
     if(this.state.data == "running") 
      this.setState({data: "stopped"}); 
     else 
      this.setState({data: "running"}); 
    }, 
    render: function() 
    { 
     return (<div>{this.state.data == "running" ? "START" : "STOP"}</div>); 
    } 
}); 

然而，當元素渲染，它顯示STOP並單擊元素上沒有做任何事情。我做錯了什麼，或者我是否必須告訴reactjs重新渲染元素？

Answer 1

你錯過了設置的onClick處理程序

<div onClick={this.onClick}>{this.state.data == "running" ? "START" : "STOP"}</div>