通常情况下,同一个数据的变化需要几个不同的组件来反映,提升共享的状态到他们最近的祖先组件中。
function BoilingVerdict(props) {
if(props.celsius >= 100) {
return <p>the water would boil.</p>
} else {
return <p>this water would not boil.</p>
}
}
//温度转换函数
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
//保留3位小数
function tryConvert(temperature,convert) {
const input = parseFloat(temperature);
if(number.isNaN(input)){
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
//父组件,存储state并修改state
class Calculator extends React.Component {
constructor(props){
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFarenheitChange = this.handleFarenheitChange.bind(this);
this.state = {temperature:'',scale:'c'};
}
handleCelsiusChange(temperature) {
this.setState({scale:'c',temperature});
}
handleFarenheitChange(temperature) {
this.setState({scale:'f',temperature});
}
render() {
//得到当前的state
const scale = this.state.scale;
const temperature = this.state.temperature;
//计算相应的温度
const celsius = scale === 'f' ? tryConvert(temperature,toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature,toFahrenheit) : temperature;
//渲染
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFarenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
const scaleNames = {
c:'celsius',
f:'fahrenheit'
};
//接收父组件传来的属性props包括scale、temperature、onTemperatureChange
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
// this.state = {temperature:''};
}
handleChange(e) {
this.props.onTemperatureChange(e.target.value);
// this.setState({temperature:e.target.value});
}
render() {
const temperature = this.props.temperature;//temperature这时是父级属性,当前组件无法控制
const scale = this.props.scale;
return (
<fieldset>
<legend>enter temperature in {scaleNames[scale]}: </legend>
<input value={temperature} onChange={this.handleChange} />
</fieldset>
);
}
}