React 狀態提公升2 6

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

列入官網的溫度計算的demo

先寫入乙個溫度輸入元件

class

temperatureinput
extends
react.component
;handlechange
=(e)
=>)}
;render()
:<
/legend>
"number" value=
onchange=
<
/fieldset>)}
}

class

temperatureinput
extends
react.component
;render()
:<
/legend>
"number" value=
onchange=
/>
<
/fieldset>)}
}

我們通過給 溫度輸入元件 傳入某個函式來讓 溫度輸入元件 中的input發生變化的時候呼叫，當然這個函式我們可以隨意命名，假如我們這裡叫做ontemperaturechange函式，那麼我們繼續修改子元件:

class

temperatureinput
extends
react.component
;render()
:<
/legend>
"number" value=
onchange=
/>
<
/fieldset>)}
}

class

calculator
extends
react.component
;// 獲取到子元件傳入的value值，對父元件中的state的value值進行相應的改變
oncelsiuschange
=(value)
=>);
};onfahrenheitchange
=(value)
=>);
};render()
ontemperaturechange=
/>
'f' temperature=
ontemperaturechange=
/>
<
/div>)}
}

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中的狀態提公升

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