Question

我正在使用React进行输入，我想要在哪里输入我的状态。我只使用React，而不是像Redux这样的架构或者你有什么我的根组件如下所示：

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负责在用户输入时呈现建议列表

我的问题是我是否应该将我的状态保留在根组件中，或者将其放在不同的子组件中状态将包含用于将用户输入与搜索建议的一些数据阵列匹配的逻辑，以及用于将值从所选搜索提示更新到输入字段的逻辑。我觉得两个子组件之间的逻辑是混合的，我不知道在哪里放置它。

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组件中计算您想要的任何内容。希望你有个主意

在父组件或子组件中的状态

2 个答案: