Javascript ReactJS：创建一个计数器类，该类以动态值递增（通过道具传递并存储在状态中）_Javascript_Reactjs_Web

Javascript ReactJS：创建一个计数器类，该类以动态值递增（通过道具传递并存储在状态中）

javascript reactjs web

Javascript ReactJS：创建一个计数器类，该类以动态值递增（通过道具传递并存储在状态中）,javascript,reactjs,web,Javascript,Reactjs,Web,这里有一些代码生成一个功能示例，如果您在firefox中打开它（我在chrome上遇到了问题），它应该可以工作单击按钮时，字数旁边的数字将按按钮上显示的值（1、5或10）递增产生所需输出的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React tutorial</title> <script src="

这里有一些代码生成一个功能示例，如果您在firefox中打开它（我在chrome上遇到了问题），它应该可以工作

单击按钮时，字数旁边的数字将按按钮上显示的值（1、5或10）递增

产生所需输出的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

    var CounterChallenge = React.createClass({
      getInitialState: function() {
        return {
          count: 0
        }
      },
      incrementCountByOne: function(value) {
        this.setState({
          count: this.state.count + 1
        })
      },
      incrementCountByFive: function() {
        this.setState({
          count: this.state.count + 5
        })
      },
      incrementCountByTen: function() {
        this.setState({
          count: this.state.count + 10
        })
      },
      render: function() {
        return (
          <div className="container">
            <h1>Count: {this.state.count}</h1>
            <button className="btn blue-btn" onClick={this.incrementCountByOne}>Add 1</button>
            <button className="btn green-btn" onClick={this.incrementCountByFive}>Add 5</button>
            <button className="btn purple-btn" onClick={this.incrementCountByTen}>Add 10</button>
          </div>
        )
      }
    });

    ReactDOM.render(
      <CounterChallenge />,
      document.getElementById('app')
    );
    </script>
  </body>
</html>

我想出来了。这里有一些重要的事情

按钮是作为函数而不是类创建的

  var ChallengeButton = function(props) {
    return (
      <button className={props.style} onClick={props.func}> Add {props.incCount} </button>
    )
  };

我想出来了。这里有一些重要的事情

按钮是作为函数而不是类创建的

  var ChallengeButton = function(props) {
    return (
      <button className={props.style} onClick={props.func}> Add {props.incCount} </button>
    )
  };

  var ChallengeButton = function(props) {
    return (
      <button className={props.style} onClick={props.func}> Add {props.incCount} </button>
    )
  };

<script type="text/babel">

      var ChallengeButton = function(props) {
        return (
          <button className={props.style} onClick={props.func}> Add {props.incCount} </button>
        )
      };

      var Challenge = React.createClass({
        getInitialState: function() {
          return {
            count: 0
        }
      },
      increment: function(value) {
        this.setState({
           count: this.state.count + value
         })
      },
      render: function() {
        return (
          <div className="container">
            <h1>Count: {this.state.count}</h1>
            <ChallengeButton style="btn blue-btn" incCount='1' func={this.increment.bind(this, 1)} />
            <ChallengeButton style="btn green-btn" incCount='5' func={this.increment.bind(this, 5)} />
            <ChallengeButton style="btn purple-btn" incCount='10' func={this.increment.bind(this, 10)} />
          </div>
        )
     }
    });

    ReactDOM.render(
      <Challenge />,
      document.getElementById('app')
    );
    </script>