如何將信息存儲在反應組件中。

Question

當我問這個問題時，我的腦海中浮現出許多疑惑。好吧，首先我會給我的問題描述。

我有組件X.它包含複選框和搜索框。

雖然在搜索框中輸入了某些內容（稱爲search_query），但需要更新與search_query相匹配的複選框。 [注意我通過一些API調用獲得了複選框的所有值。並在創建組件時完成。 ]

我來到了我的腦海裏首先懷疑的是，

1. 店（SEARCH_QUERY）和（複選框的值）的組件的狀態

如果值更的搜索需要更多的時間。

是有可能改變該組件

或是否有任何其他的方法來做到這裏面的道具的價值觀

Answer 1

由於沒有共享代碼。假設您使用的是簡單的React（不使用Redux，則使用中間件）。

回答你的問題：

[1]是否有可能改變組件內部道具的價值？

更改組件內的道具值是一種不好的方法。

「所有的React組件都必須像純粹的功能一樣對其道具起作用。」

[參考：https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only]

此外，視圖不如果道具值在組件內改變得到更新。

[2]或者有沒有其他的方式來做到這一點。

是（在組件內沒有突變） 使用「狀態」屬性來保存值& setState更新值。

[3]如何在反應組件中存儲信息？

讓我們將組件X重命名爲FilterData， searchbox（SearchBox）&複選框（SelectionBox）是兩個單獨的組件。

// Define state to FilterData 
class FilterData extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     term: '', 
     searchResults: [] 
    } 
    } 
    .... 
} 

// pass the state values to child components as props 
class FilterData extends React.Component { 
    .... 
render() { 
return (
     <div> 
     <SearchBox term={this.state.term} /> 
     <SelectionBox options={this.state.searchResults} /> 
     </div> 
    ) 
} 
} 

在陣營應用， 數據流頂部向下（單向）並且應該有事實的單一來源。

搜索盒& SelectionBox是兩個獨立的（兄弟姐妹）的組件， 搜索盒的狀態具有條件（其中有搜索字符串） 當用戶進入輸入搜索盒將更新其狀態，並可以檢測變更事件和火災阿賈克斯，並獲得響應。

SelectionBox如何檢測已發生的搜索，以及如何獲取數據。 這就是爲什麼狀態被移動到共同的祖先FilterData。

[參考：https://facebook.github.io/react/docs/lifting-state-up.html]

[參考：https://facebook.github.io/react/docs/state-and-lifecycle.html#the-data-flows-down]

代碼示例---------------------------- -------------------------

選擇的值不會被保存： https://codepen.io/sudhnk/pen/NgWgqe?editors=1010

選擇的值保存： https://codepen.io/sudhnk/pen/JJjyZw?editors=1010