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

Question

当我提出这个问题时，脑海中浮现出许多疑虑。好吧，首先我会给出我的问题描述。

我有组件X.它包含复选框和搜索框。

在搜索框中键入内容（称之为search_query），  X需要更新与search_query匹配的复选框。 [请注意，我通过一些api调用得到了复选框的所有值。并在创建组件时完成。 ]

我想到的第一个疑问是

1. 以组件状态存储（search_query）和（复选框的值）

如果值更多搜索需要更多时间。

1. 是否可以更改组件内的道具值

还是有其他办法吗？

Answer 1

由于没有共享代码。假设你使用普通的React（没有Redux，使用中间件）。

回答你的问题：

[1]是否可以更改组件内的道具值？

更改组件内的道具值是一种不好的方法。

＆＃34;所有React组件必须像其道具一样表现纯粹的功能。＆＃34;

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

此外，如果在组件中更改了props值，则视图不会获得更新。

[2]还是有其他方法可以做到这一点。

是（组件内部没有突变） 使用＆＃34; state＆＃34;保持价值的财产＆amp; setState更新值。

[3]如何将信息存储在反应组件中？

让我们将组件X重命名为FilterData， searchbox（SearchBox）＆amp; checkboxes（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>
    )
}
}

在React App中， 数据流自上而下（单向），应该有一个单一的事实来源。

SearchBox＆amp; SelectionBox是两个独立的（兄弟）组件， SearchBox的州有条款（有搜索字符串） 当用户输入输入时，SearchBox将更新其状态，并可能检测更改事件并触发ajax并获取响应。

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