React 狀態提公升

假設我們有這樣乙個需求，提供兩個輸入框（分別屬於兩個元件），保證輸入框裡面的內容同步

下面我們先來封裝乙個輸入框元件 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 狀態提公升2 6

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

React中的狀態提公升

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

React 狀態提公升

React狀態提公升

React 狀態提公升2 6

React中的狀態提公升

相關推薦