做一個(gè)百分比換算器，需要你完成三個(gè)組件：
<Input />：封裝了原生的<input />，可以輸入任意數(shù)字
<PercentageShower />：實(shí)時(shí) 顯示 <Input /> 中的數(shù)字內(nèi)容恋拍，但是需要把它轉(zhuǎn)換成百分比，例如 <Input /> 輸入的是 0.1啃憎，那么就要顯示 10.00%芝囤，保留兩位小數(shù)。
<PercentageApp />：組合上述兩個(gè)組件辛萍。
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>
)
}
}
