如何将信息存储在反应组件中。

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