React JS - 在標簽點擊時清除子 forms

Question

問題陳述：我有一個顯示 React-Bootstrap 選項卡的父組件。 Tabs 組件中有 2 個選項卡，每個選項卡都有自己的 state。 當我在父組件的選項卡之間切換時，我需要清除子組件的 state。

例如，我的父組件顯示“搜索”和“創建”選項卡。 當我 go 到“創建”選項卡並執行創建功能時，創建選項卡會顯示一些成功消息。 現在，當我移至搜索選項卡並返回創建選項卡時，所有消息和輸入字段仍顯示我輸入的先前值。 但是，當我從“搜索”選項卡返回時，我需要清除“創建”選項卡的 state。

示例代碼：

<Tab eventKey="search" title="Search">
            <Search />
          </Tab>
          <Tab eventKey="create" title="Create">
            <Create />
          </Tab>

是否有一種反應生命周期方法可以用來清除子組件的狀態？

Answer 1

在 react 中， componentDidMount()或componentWillMount()只會被調用一次，並且與構造函數相同，只要 state 發生變化，就會一次又一次地調用render() 。 這是默認的生命周期或反應組件。

但是，您可以通過傳遞不同的key prop 來強制 react 組件重新啟動其生命周期，這將使 react 認為它是一個新組件。

做這樣的事情：

<Create key = {"somekey" + Math.random() * 100} />

還有一個技巧，有很多方法可以做到。

Answer 2

Tabs接受 boolean 道具unmountOnExit 。 重新進入時應該重新實例化<Create />組件，有效地重置其內部 state。

<Tabs unmountOnExit />
  <Tab eventKey="search" title="Search">
    <Search />
  </Tab>
  <Tab eventKey="create" title="Create">
    <Create />
</Tab>

Answer 3

這不是那么清楚。 根據我的理解，和組件都在任何時候都被渲染。 因此，當您在選項卡之間切換時，組件不會被卸載。 並且由於其父組件的 state 沒有變化，因此不會導致重新渲染。 生命周期方法將無法幫助您。

解決它的一種方法是這樣的。 在兩個 Tabs 的父組件中，將 eventKey 保存在 state 中。 將 function 傳遞到兩個選項卡以切換它。 並有條件地呈現其中一個選項卡。 父級的渲染將是這樣的：

render() {
this.state.eventKey === "search" ? (<Tab eventKey="search" title="Search">
        <Search />
      </Tab>): <Tab eventKey="create" title="Create">
        <Create />
      </Tab>
}

希望這可以幫助！

@hackape 的解決方案是基於您正在使用的組件庫的最准確的解決方案。 試試看。 它應該解決問題