Guest User

Untitled

a guest
Feb 12th, 2019
98
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class DzieckoComponent extends React.Component {
  2.     constructor(props) {
  3.         super(props);
  4.  
  5.         this.increment = this.increment.bind(this);
  6.         this.decrease = this.decrease.bind(this);
  7.     }
  8.     increment() {
  9.         this.props.onIncrement()
  10.     }
  11.  
  12.     decrease() {
  13.         this.props.onDecrease()
  14.     }
  15.  
  16.     render() {
  17.         return (
  18.             <dir>
  19.                 <output>{this.props.numValue}</output><br />
  20.                 <button onClick={this.increment}>+</button>
  21.                 <button onClick={this.decrease}>-</button>
  22.             </dir>
  23.         )
  24.     }
  25. }
  26.  
  27.  
  28. export default class RodzicComponent extends React.Component {
  29.     constructor(props) {
  30.         super(props);
  31.         this.state = {numValue: 0};
  32.         this.handelManualChangeInput = this.handelManualChangeInput.bind(this);
  33.         this.increment = this.increment.bind(this);
  34.         this.decrease = this.decrease.bind(this);
  35.     }
  36.     handelManualChangeInput(event) {
  37.         this.setState({
  38.             numValue: Number(event.target.value)
  39.         }, () => {console.log(typeof (this.state.numValue))})
  40.     }
  41.  
  42.     increment() {
  43.         this.setState({
  44.             numValue: this.state.numValue + 1
  45.         }, () => {console.log(typeof (this.state.numValue))})
  46.     }
  47.  
  48.     decrease() {
  49.         this.setState({
  50.             numValue: this.state.numValue - 1
  51.         }, () => {console.log(typeof (this.state.numValue))})
  52.     }
  53.  
  54.     render() {
  55.         return (
  56.             <div>
  57.                 <input
  58.                     name="numValue"
  59.                     type="number"
  60.                     value={this.state.numValue}
  61.                     onChange={this.handelManualChangeInput} />
  62.                 <DzieckoComponent
  63.                     numValue={this.state.numValue}
  64.                     onIncrement={this.increment}
  65.                     onDecrease={this.decrease}/>
  66.             </div>
  67.         )
  68.     }
  69. }
RAW Paste Data