React 狀態提公升案例 燒開水

1.定義boilin**erdict元件

function

boilin**erdict
(props)
else
}export
default boilin**erdict

import react from

"react"
import boilin**erdict from
"./boilin**erdict"
class
calculator
extends
react.component
}inputchange
(e))
}render()
/>
<
/fieldset>
/>
<
/div>)}
}export
default calculator

import react from
"react"
import boilin**erdict from
"./boilin**erdict"
import temperatureinput from
"./temperatureinput"
class
calculator
extends
react.component
}render()
/>
/>
/>
<
/div>)}
}export
default calculator

import react from
"react"
let scalename =
class
temperatureinput
extends
react.component
}inputchange
(e))
}render()
= this.props;
let scale =
this
.props.scale;
return
(input:
<
/legend>
"text" onchange=
/>
<
/fieldset>)}
}export
default temperatureinput

狀態提公升：將狀態提公升至離自己最近的父元件，元件之間的通訊就可以使用狀態提公升

import react from
"react"
import boilin**erdict from
"./boilin**erdict"
import temperatureinput from
"./temperatureinput"
class
calculator
extends
react.component
}handlecelsiuschange
(val))}
handlefahrenheitchange
(val))}
render()
ontemperaturechange=
temperature=
/>
ontemperaturechange=
temperature=
/>
/>
<
/div>)}
}export
default calculator

import react from
"react"
let scalename =
class
temperatureinput
extends
react.component
render()
= this.props;
let scale =
this
.props.scale;
console.
log(
this
.props)
;return
(input:
<
/legend>
"text" 
onchange=
value=
/>
<
/fieldset>)}
}export
default temperatureinput

新建utils資料夾，和index.js檔案

let convertfn =

,tofahrenheit
(celsius)
}function
tryconvert
(temperature,convert)
const input =
parsefloat
(temperature)
//變成浮點數
const output = convertfn[convert]
(input)
;//呼叫函式並傳參
const rounded = math.
round
(output*
1000)/
1000
;//保留三位小數
return rounded.
tostring()
}export
default tryconvert

import react from

"react"
import boilin**erdict from
"./boilin**erdict"
import temperatureinput from
"./temperatureinput"
import tryconvert from
"../utils/index"
class
calculator
extends
react.component
}handlecelsiuschange
(val))}
handlefahrenheitchange
(val))}
render()
=this
.state//let scale = this.state.scale
//求攝氏度和華氏度
let celsius = scale===
"c"? temperature :
tryconvert
(temperature,
'tocelsius');
let fahrenheit = scale===
'f'? temperature :
tryconvert
(temperature,
'tofahrenheit');
return
(ontemperaturechange=
temperature=
/>
ontemperaturechange=
temperature=
/>
/>
<
/div>)}
}export
default calculator

React狀態提公升

react狀態提公升 react中的狀態提公升概括來說,就是將多個元件需要共享的狀態提公升到它們最近的父元件上.在父元件上改變這個狀態然後通過props分發給子元件.class one extends react.component render class two extends react.co...

React 狀態提公升

假設我們有這樣乙個需求，提供兩個輸入框 分別屬於兩個元件 保證輸入框裡面的內容同步 下面我們先來封裝乙個輸入框元件 input class input extends react.component this.handlechange this.handlechange.bind this hand...

React 狀態提公升2 6

react中的狀態提公升概括來說,就是將多個元件需要共享的狀態提公升到它們最近的父元件上.在父元件上改變這個狀態然後通過props分發給子元件.列入官網的溫度計算的demo 先寫入乙個溫度輸入元件 class temperatureinput extends react.component hand...