React學習筆記 五 狀態提公升

狀態提公升究竟是什麼東西呢？別急，下面讓我們一步一步來看看究竟要怎麼使用狀態提公升

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

好，下面我們先來封裝乙個輸入框元件input

class input extends react.component 

this.handlechange = this.handlechange.bind(this)
}handlechange(e) )
}render() 
}

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...