狀態提公升究竟是什麼東西呢?別急,下面讓我們一步一步來看看究竟要怎麼使用狀態提公升
假設我們有這樣乙個需求,提供兩個輸入框(分別屬於兩個元件),保證輸入框裡面的內容同步
好,下面我們先來封裝乙個輸入框元件input
然後我們另外定義乙個元件class input extends react.component
this.handlechange = this.handlechange.bind(this)
}handlechange(e) )
}render()
}
allinput
,在這個元件中包含兩個input
元件,這樣我們就得到兩個輸入框
好,下乙個要解決的問題是怎麼使兩個輸入框的內容同步class allinput extends react.component
render()
}
在兩個input
元件中,它們各自的內容儲存在各自的 state 當中,要怎麼做才能使兩個元件共享資料呢?
答案是狀態提公升,即將兩個元件需要共享的資料儲存在共同的父元件中,然後子元件通過 props 獲取父元件資料
也就是說,我們可以將兩個子元件input
的資料儲存在它們的父元件allinput
當中
我們先來看看怎麼修改父元件的定義:
然後我們再來修改子元件定義:class allinput extends react.component
this.handlecontentchange = this.handlecontentchange.bind(this)
}// 定義修改 state 的方法,通過 props 傳遞給子元件使用
// 接收乙個引數(新的資料)
handlecontentchange(newcontent) )
}render()
}
通過狀態提公升,這樣就可以實現元件之間的資料共享啦,乙份完整的可執行的**如下:class input extends react.component
handlechange(e)
render()
}
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...