React的多组件状态提升案例
2020-12-19 本文已影响0人
JohnYuCN
一、案例说明：
摄氏，华氏，开氏温度的转换器
image.png
二、组件关系图：
image.png
三、代码（复制粘贴，即可运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>综合演示状态的控制</h2>
<!-- We will put our React component inside this div. -->
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load our React component. -->
<script type="text/babel">
// 温度转换工具
class TemperatureUtil{
//摄氏转华式
static c2f(value){
value=value*9/5+32
return Math.round(value*100)/100
}
//摄氏转开式
static c2k(value){
return value-273.12
}
//华式转摄氏
static f2c(value){
value=(value-32)*5/9
return Math.round(value*100)/100
}
//开式转摄氏
static k2c(value){
return parseFloat(value) + 273.12
}
}
// 水的状态的指示器
function VerdictShow(props){
let info=props.temperature>=100?"水被烧开了":"水还没有被烧开"
return <div>{info}</div>
}
//这是：输入温度的表单（props上共有三个参数：scale-度量单位，onChangeTemprature-value变化的回调，temperature-温度值）
//由于不使用state及生命周期方法，所以此类简化成为function
function TemperaturInput(props){
let temperature=props.temperature
let changeTemprature=event=>props.onChangeTemprature(event.target.value)
return (
<fieldset>
<legend>请输入温度({props.scale})</legend>
<input type="number" value={temperature} onChange={changeTemprature}/>
</fieldset>
)
}
class Caculator extends React.Component{
constructor(props){
super(props)
this.state={temperature:100} //使用摄氏温度做为标准值
}
//state的变化，引起render的回调
render(){
//由摄氏标准向华式、开式的转换
let fahrenheit=TemperatureUtil.c2f(this.state.temperature)
let kalvin=TemperatureUtil.c2k(this.state.temperature)
return (
<div>
<TemperaturInput scale="摄氏" temperature={this.state.temperature} onChangeTemprature={this.changeCelsiusTemperatureHandler}/>
<TemperaturInput scale="华式" temperature={fahrenheit} onChangeTemprature={this.changeFahrenheitTemperatureHandler}/>
<TemperaturInput scale="开式" temperature={kalvin} onChangeTemprature={this.changeKalvinTemperatureHandler}/>
<hr/>
<VerdictShow temperature={this.state.temperature} />
</div>
)
}
//三个不同输入的回调，先转换为摄氏标准，再修改state，进而调用render
changeCelsiusTemperatureHandler=(temperature)=>{
this.setState({temperature:temperature})
}
changeFahrenheitTemperatureHandler=(temperature)=>{
temperature= TemperatureUtil.f2c(temperature)
this.setState({temperature:temperature})
}
changeKalvinTemperatureHandler=(temperature)=>{
temperature= TemperatureUtil.k2c(temperature)
this.setState({temperature:temperature})
}
}
ReactDOM.render(<Caculator/>,document.querySelector('#app'))
</script>
</body>
</html>
