Question

我正在尝试遵循一个简单的教程。我的测试代码在我的本地服务器上运行完美。但是当我尝试将代码调整为Plunker时，会导致错误，我无法弄清楚原因。代码在Snippet中运行良好。也许我想念一些东西。 Plz的帮助。：（

＆＃13;

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')
);

＆＃13;

<!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>

＆＃13;

Answer 1

Ur代码是正确的，不知道为什么它不能用于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中不运行

1 个答案: