Reactjs 关于Redux格式文本输入的建议

我已经做了相当多的搜索，但我还没有找到我希望的解决方案

我的目标是在用户开始输入文本时向用户显示建议。假设我有一个将被建议的名称数组。我想会有一个onChange处理程序，但我不知道如何有效地实现它

---

我很感激你的建议

方法是通过调度redux操作

getNamesArray

获取所有数组数据，然后使用组件中的过滤器和映射函数：

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处理程序的returnput和text字段中：

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

---

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

实际上，您需要做的是创建某种

，等等）

然后，您需要将
redux表单
的
onChange
和
value
道具删除到此组件，以便它更新您的
redux表单

实现应该如下所示：

   <Field
      name="fieldName"
      component={({ input: { value, onChange } }) => (
        <AutoComplete value={value} onChange={onChange} />
      )}
    />

(

（请记住，我使用了
redux form material ui
，它抽象了
onChange
和
value
的委托，并允许您使用
redux form
上的所有material ui的
autoomlete
道具。）

希望这有帮助：）
这看起来真不错，我要试试。谢谢你，先生：）
   <Field
      name="fieldName"
      component={({ input: { value, onChange } }) => (
        <AutoComplete value={value} onChange={onChange} />
      )}
    />