状态改变后更新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>