在父组件或子组件中反应状态

Question

我正在使用React进行输入，我想要在哪里放置我的状态。 我只使用React，而不是像Redux这样的架构或者你有什么我的root组件看起来像这样：

import React, { Component } from 'react';
import InputSearch from './input_search';
import SearchHints from './search_hints';

class Main extends Component {
  constructor(props) {
    super(props)
    this.state =   
       /* Some state here? */
    }
  }

  render() {
    return (
      <InputSearch />
      <SearchHints />
    );
  }
}

InputSearch显然负责<input />标记， SearchHints负责在用户<input />时呈现建议列表

我的问题是我是否应该将我的状态保存在根组件中，或者将它放在不同的子组件中状态将包含用于将用户输入与搜索建议的某些数据数组匹配的逻辑，以及用于更新值的逻辑选定的搜索提示输入字段。 我觉得两个子组件之间的逻辑是混合的，我为什么不确定在哪里放置它。

Answer 1

我会在您的根组件中保留用户已键入的内容，以及显示的最后建议数据。 我也会把这些州议员交给孩子们。

我会用这样的东西：

this.state = {
  text: "",
}

...

<InputSearch value={this.state.text} />

// 1st case:
<SearchHints query={this.state.text} /> 

// 2nd case:
<SearchHints hints={arrayOfSuggestions} />

// 3rd case:
<SearchHints>
  <Hint someProps />
  <Hint someProps />
  <Hint someProps />
</SearchHints>

在第一种情况下，您的元素SearchHints会查找建议。

否则，你必须给它一个道具数组或一系列带有建议的孩子。

Answer 2

您应该始终在根组件中维护您的状态，因为您的应用程序流程围绕您的根组件。因此您应该相应地规划组件。

如果您认为在root中维护应用程序的状态很困难，并且您的子组件也需要维护某些本地状态，那么您应该使用存储（flux，redux）。

现在查看你的问题陈述，将状态保持在root状态将是一个简单的解决方案，因为你可以将状态传递给子组件并在子组件中进行任何计算。保持每个子组件的不同状态将使你的代码更多复杂。

要实现这一点，只需将您的状态设置为某种状

{input:""}

在您的inputsearch组件中，您可以执行此操作

function:method(event)
{

this.props.setInput(event)


}
<input type="text" onChange={this.setInput}/>

在主根组件中

function:setInputAsState(input)
{
this.setState({


input:input
])

}
<inputsearch  setInput={this.setInputAsState}/>
<SearchHints state={this.state.input}/>

现在，在SearchHints组件中计算您想要的任何内容。 希望你有个主意