Question

我做了很多搜索，但没有找到我希望的解决方案。

我的目标是在用户开始输入文本输入时向他们显示建议。假设我有一系列建议的名称。我想会有一个onChange处理程序，但是我不确定如何有效地实现它。

我很感谢任何建议！

Answer 1

基本上，您需要做的是创建某种<AuotoComplete />输入组件（或者-通常执行的操作-使用某些第三方组件库来提供此功能）。 material-ui，react-select，react-autosuggest等）。

然后，您需要将redux-form的{{1}}的{{1}}和<Field />道具用于此组件，以便它更新您的onChange减速器。

该实现应如下所示：

value

Here's a working example I created with material-ui's AutoComplete.

（请记住，我使用了redux-form来抽象<Field name="fieldName" component={({ input: { value, onChange } }) => ( <AutoComplete value={value} onChange={onChange} /> )} />和redux-form-material-ui的委托，并允许您使用所有Material-ui的onChange的道具在value的{{1}}）上加注

希望这会有所帮助：）

Answer 2

您可以通过调度redux操作getNamesArray来获取所有数组数据，然后在组件中使用filter和map函数：

componentDidMount() {
  this.props.getNamesArray();
}

render(){
  const { namesArray } = this.props; // from redux mapStateToProps
  let namesArrayItems;

  if (namesArrayItems.length > 0) {
    namesArrayItems = namesArray
      .filter(name => {
        // remove names that do not match current filter text
        return name.toLowerCase().indexOf(this.state.name.toLowerCase()) >= 0
      })
      .map(name=> (
        <NameItem key={name._id} name={name} />
      ));
    } else {
      namesArrayItems = <h4>No Names found...</h4>;
        }
  return (
    {namesArrayItems}
  );
}

然后使用一个文本字段输入，该文本字段输入通过使用onChange处理程序以this.state.name的形式获得用户输入：

onChange(e) {
  this.setState({ [e.target.name]: e.target.value });
}

然后在带有onChange处理函数的return put和text字段中：

<input
  type="text"
  name="name"
  value={this.state.name}
  placeholder="Filter Names"
  onChange={this.onChange.bind(this)}
/>

对我来说工作效率很高。这种方法的缺点是，您首先要获取所有数组数据，因此这将花费更长的加载时间，但是应用程序不需要在每次用户输入时都获取数据，从而使用户体验更加无缝。

关于以Redux形式输入文本的建议

2 个答案: