React.js 代码在本地服务器中运行但不在 Plunker 中

Question

我正在尝试遵循一个简单的教程。我的测试代码在我的本地服务器上完美运行。但是当我尝试使代码适应 Plunker 时，它会导致一个我无法弄清楚原因的错误。该代码在 Snippet 中运行良好。也许我错过了什么。请帮助。 :(

const Timer = ({currentValue}) => {
  return(
    <div className="Time">
      {currentValue}
    </div>
  );
};

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {currentValue: 150};

    setInterval(
      () => {
        this.setState({currentValue: this.state.currentValue - 1});
      }, 1000
    );
  }
// This cause an Unknown error in Plunker
  resetTimer = () => {
      this.setState({currentValue:150});
  };

  render() {
    return (
      <div className="App">
        <Timer currentValue={this.state.currentValue} />
        <button onClick={this.resetTimer}>Reset</button>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

Answer 1

你的代码是正确的，不知道为什么它不能在 plunker 上工作，同样的代码在 Jsfiddle 上工作，你可以试试这个替代方案，绑定 onClick手动方法，它会起作用，试试这个：

const Timer = ({currentValue}) => {
  return(
    <div className="Time">
      {currentValue}
    </div>
  );
};

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {currentValue: 150};

    setInterval(
      () => {
        this.setState({currentValue: this.state.currentValue - 1});
      }, 1000
    );
  }
  resetTimer(){
      this.setState({currentValue:150});
  };

  render() {
    return (
      <div className="App">
        <Timer currentValue={this.state.currentValue} />
        <button onClick={this.resetTimer.bind(this)}>Reset</button>
      </div>
    );
  }
}

检查工作代码-

plunker代码：https://plnkr.co/edit/NZPKuTdnIvL75IKgApFZ?p=preview

jsfiddle: https://jsfiddle.net/ypt9q7p6/

React.js 代码在本地服务器中运行但不在 Plunker 中

React.js code runs in local server but not in Plunker

reactjs

plunker