#9 百分比换算器

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

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

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

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

class Input extends React.Component {
  constructor(props){
      super(props)
      this.state = {
          value: ''
      }
  }
  handleChange(e) {
      this.setState({
          value: e.target.value
      })
      if(this.props.onChange){
          this.props.onChange({
              value: e.target.value
          })
      }
  }
  render() {
    return (
      <div>
        <input type='number' onChange = { this.handleChange.bind(this) } value = { this.state.value } />
      </div>
    )
  }
}

class PercentageShower extends React.Component {
  render () {
    return (
      <div>
        <span>{ this.props.value }</span>
      </div>
    )
  }
}

class PercentageApp extends React.Component {
  constructor(props){
      super(props);
      this.state = {
          value: ''
      }
  }
  handleChange = (e) => {
        console.log(e)
        if(!e || !e.value) return
        this.setState({
            value: (e.value * 100).toFixed(2) + '%'
        })
    }
  render () {
    return (
      <div>
        <Input onChange={ this.handleChange } />
        <PercentageShower value={ this.state.value } />
      </div>
    )
  }
}