Question

我是reactJS的新手。

我试图在我的网页上附上时间。但是，当我使用setInterval时，时间不起作用。只是在页面加载时停止。

我正在使用React.createClass：

var MainContent = React.createClass({

  getInitialState: function(){
    return {waktu: new Date().toLocaleTimeString()}
  },

 componentDidMount: function(){
   setInterval(this.tick, 1000)
 }, 

 tick: function(){
    this.setState({waktu: this.state.waktu})
 },

  render: function(){

    return(
      <div className="container">
        <div className="panel panel-success">
          <div className="panel-heading">
            <h3 className="panel-title">Panel title</h3>
          </div>
          <div className="panel-body">
            Panel content &nbsp;
            {this.state.waktu}
          </div>
        </div>
      </div>
    );
  }
});

Answer 1

您需要将此绑定到您的setTimeOut函数，您可以在此处查看更多相关信息：https://facebook.github.io/react/docs/handling-events.html

setInterval(this.tick, 1000).bind(this)

并且要更改您的日期，只需在您的州内应用新日期：

this.setState({waktu: new Date()})

Answer 2

将您的初始时间代码拉入单独的函数，并在setState。

时调用它

function getTime() {
  return new Date().toLocaleTimeString()
}

getInitialState: function() {
  return { waktu: getTime() }
}

tick: function() {
  this.setState({ waktu: getTime() })
}

您还需要在setInterval中绑定该函数。

Answer 3

每个间隔后将状态设置为自己的值不会有帮助。您需要设置为当前时间

＆＃13;

var MainContent = React.createClass({

  getInitialState: function(){
    return {waktu: new Date().toLocaleTimeString()}
  },

 componentDidMount: function(){
       setInterval(this.tick, 1000)
     }, 
     currentTime: function () {
        return new Date().toLocaleTimeString();
     },
     tick: function(){
        this.setState({waktu: this.currentTime()})
     },


  render: function(){

    return(
      <div className="container">
        <div className="panel panel-success">
          <div className="panel-heading">
            <h3 className="panel-title">Panel title</h3>
          </div>
          <div className="panel-body">
            Panel content &nbsp;
            {this.state.waktu}
          </div>
        </div>
      </div>
    );
  }
});

ReactDOM.render(<MainContent/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

reactjs setInterval没有按预期工作

3 个答案: