做一个百分比换算器，需要你完成三个组件：
<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>
)
}
}
