Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
  • code-along
2 results
Blame Permalink
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
events_and_state_v3.html 2.12 KiB 
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>Events and State</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #FFF;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script type="text/babel">
    class Counter extends React.Component {
      render() {
        var textStyle = {
          fontSize: 72,
          fontFamily: "sans-serif",
          color: "#333",
          fontWeight: "bold"
        };
    
        return (
          <div style={textStyle}>
            {this.props.display}
          </div>
        );
      }
    }
    
    class CounterParent extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          count: 0
        };

        this.increase = this.increase.bind(this);
      }

      increase(e) {
        var currentCount = this.state.count;
        if (e.shiftKey) {
          currentCount += 10;
        } else {
          currentCount += 1;
        }
        this.setState({
          count: currentCount
        });
      };
    
      render() {
        var backgroundStyle = {
          padding: 50,
          backgroundColor: "#FFC53A",
          width: 250,
          height: 100,
          borderRadius: 10,
          textAlign: "center"
        };
        var buttonStyle = {
          fontSize: "1em",
          width: 30,
          height: 30,
          fontFamily: "sans-serif",
          color: "#333",
          fontWeight: "bold",
          lineHeight: "3px"
        };
    
        return (
          <div style={backgroundStyle}>
            <Counter display={this.state.count} />
            <button onClick={this.increase} style={buttonStyle}>+</button>
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <div>
        <CounterParent />
      </div>,
      document.querySelector("#container")
    );
  </script>
</body>
 
</html>