版权声明:如果觉的本文好的话,点个赞,您的鼓励是我最大的动力。 https://blog.csdn.net/boysky0015/article/details/88381470
10.状态提升(Lifting State Up)
import React,{ Component } from 'react';
function Bilo(props) {
if(props.value >= 100){
return <h1>水开了</h1>
}
return <div>水还没有开</div>
}
class StatePromote extends Component {
constructor(props) {
super(props);
this.state = {
temperature: 123,
}
this.proChange = this.proChange.bind(this);
}
proChange(e) {
let value = e.target.value;
this.setState({
temperature: value,
})
}
render() {
return (
<fieldset>
<legend>请输入温度:</legend>
<input onChange={ this.proChange } value={ this.temperature }/>
<Bilo value={ this.state.temperature }/>
</fieldset>
)
}
}
export default StatePromote;
状态同步
import React,{ Component } from 'react';
function Bilo(props) {
if(props.celsius >= 100){
return <h1>水开了</h1>
}
return <div>水还没有开</div>
}
const scaleName = {
c: 'Ceisius',
f: 'Fahrenheit',
}
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function toFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
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();
}
class TemperatureInput extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let value = e.target.value;
this.props.onTemperatureChange(value);
}
render() {
const scale = this.props.scale;
const temperature = this.props.temperature;
return (
<fieldset>
<legend>请输入{ scaleName[scale] }温度:</legend>
<input onChange={ this.handleChange } value={ temperature }/>
</fieldset>
)
}
}
class Calulator extends Component {
constructor(props) {
super(props);
this.state = {
temperature: '',
scale: 'c',
}
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
}
handleCelsiusChange(temperature) {
this.setState({
scale: 'c',
temperature,
})
}
handleFahrenheitChange(temperature) {
this.setState({
scale: 'f',
temperature,
})
}
render() {
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.handleFahrenheitChange }
/>
<Bilo celsius={parseFloat(celsius)}/>
</div>
)
}
}
export default Calulator;