#9-百分比换算器.md

#9 百分比换算器

---

题目描述：

做一个百分比换算器，需要你完成三个组件：

<Input />：封装了原生的<input />，可以输入任意数字

<PercentageShower />：实时 显示<Input /> 中的数字内容，但是需要把它转换成百分比，例如 <Input /> 输入的是 0.1，那么就要显示 10.00%，保留两位小数。

<PercentageApp />：组合上述两个组件。

---

参考答案：

class Input extends Component {
  
  handleInput(e) {
    this.props.setNum(e.target.value)
  }
  render () {
    return (
      <div>
        <input type='number' onChange={this.handleInput.bind(this)}/>
      </div>
    )
  }
}

class PercentageShower extends Component {
  render () {
    const { value } = this.props
    return (
      <div>{(value * 100).toFixed(2)}%</div>
    )
  }
}

class PercentageApp extends Component {
  constructor() {
    super()
    this.state = {
      value: 0
    }
  }
  handleInput(v) {
    this.setState({
      value: v 
    })
  }
  render () {
    const { value } = this.state;
    return (
      <div>
        <Input setNum={this.handleInput.bind(this)} />
        <PercentageShower value={value} />
      </div>
    )
  }
}