React

by uiwwnw

HTML

<div id="app"></div>

SCSS

.startBox {
  position: absolute;
  display: table;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  
  label {
    display: table-cell;
    input {
      display: block;
      width: 100%;
    }
  }
}
.peopleBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.conditionBox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

React

class Sadari extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	people: [],
      condition: []
    }
  }
  setLength(e) {
    let stateName = String(e.target.className);
    let length = [];
    for(let i = 0; i < e.target.value; i++) {
         length.push('');
       }
    if (stateName === 'people') {
       
      this.setState({people:length})
    } else if (stateName === 'condition') {
      this.setState({condition:length})
    }
  }
  set(e) {
    let stateName = String(e.target.className);
    if (stateName === 'people') {
      this.setState({people:e.target.value})
    } else if (stateName === 'condition') {
      this.setState({condition:e.target.value})
    }
  }
  
  render() {
    return (
      <div className="sadariZone">
        <StartPack onChange={this.setLength.bind(this)} />
        <People onChange={this.set.bind(this)} people={this.state.people} />
        <Result />
        <Condition onChange={this.set.bind(this)} condition={this.state.condition} />
      </div>
    )
  }
}

class StartPack extends React.Component {
  constructor(props) {
    super(props)
  }
  
  
  render() {
    return (
      <div className="startBox">
        <button>Start</button>
        <label>
          <input type="number" onChange={this.props.onChange.bind(this)} className="people"></input>
        </label>
        <label>
          <input type="number" onChange={this.props.onChange.bind(this)} className="condition"></input>
        </label>
      </div>
    )
  }
}

class People extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
  let people = [];
	for (var i = 0; i < this.props.people.length; i++) {
		people.push(<label key={i}><input type="text" onChange={this.props.onChange.bind(this)} placeholder="Please typing your name."></input></label>)
  }
    return (
      <div className="peopleBox">
       {people}
      </div>
    )
  }
}

class Condition extends React.Component {
 ...