Question

我知道已经发布了一些这样的问题，但我找不到工作的答案。我的代码如下。一切都链接，我能够得到一个更简单的计时器工作，只是在组件安装时开始计时，但现在我想让它更具交互性。但是，当我点击按钮时没有任何反应。我想要做的是有一个按钮组件，当它被点击它变成一个计时器并显示自点击以来经过的时间量。但是点击按钮不会做任何事情。

感谢您的帮助！

var StartButton = React.createClass({
  getInitialState:function(){
    return { elapsed: 0, go: false };
  },
  getDefaultProps: function() {
    return {
      interval: 1000
    };
  },
  componentDidMount: function(){
    console.log('mounted');
  },
  tick: function(){
    console.log('tick')
    this.setState({elapsed: new Date() - this.state.start});
  },
  startCount: function(e){
    console.log(e);
    console.log('GO!!!')  
    this.state.props = Date.now;
    this.state.go = true;  
    this.timer = setInterval(this.tick, this.props.interval);
  },
  render: function(){
    var self = this;
    var elapsed = Math.round(this.state.elapsed / 100);
    var seconds = (elapsed / 10).toFixed(3); 
    var clickMe = <button onCLick={self.startCount} >GO</button>;
    var display = <div>time elapsed {this.state.elapsed}</div>
    return (
        <div>
          {this.state.go ? display : clickMe}
        </div>
      )    
  }
})

var AppContainer = React.createClass({
  render: function(){
    return (<div><StartButton interval={1000} /></div>);
  }
})

$(document).ready(function () {
  console.log('in ready');
  ReactDOM.render(<AppContainer></AppContainer>, document.getElementById('jake'));
});

Answer 1

目前还不确定您是否发现了所有小错误，但如果您还没有，则此处是您的组件的工作副本;

var StartButton = React.createClass({
    getInitialState:function(){
        return { elapsed: 0, go: false };
    },
    getDefaultProps: function() {
        return {
            interval: 1000
        };
    },
    componentDidMount: function(){
        console.log('mounted');
    },
    tick: function(){
        console.log('tick')
        this.setState({elapsed: Date.now() - this.state.start});
    },
    startCount: function(e){
        console.log(e);
        console.log('GO!!!')
        this.setState({start: Date.now(), go: true})
        setInterval(this.tick, this.props.interval);
    },
    render: function(){
        var clickMe = <button onClick={this.startCount} >GO</button>;
        var display = <div>time elapsed {Math.round(this.state.elapsed / 1000)} seconds</div>
        return (
            <div>
                {this.state.go ? display : clickMe}
            </div>
        )
    }
})

Answer 2

我认为问题出现在onClick：

var clickMe = <button onClick={self.startCount} >GO</button>;

React onClick无法启动计时器

2 个答案: