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

Question

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

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

我很感激任何建议！

Answer 1

实际上，你需要做的是创建某种<AuotoComplete />输入组件（或 - 通常会做什么 - 使用一些第三方组件库，它将提供开箱即用的功能。例如material-ui，react-select，react-autosuggest等。 ）。

然后你需要将redux-form的<Field />的onChange和value道具传递给这个组件，以便它更新你的redux-form减速器。

实现应该如下所示：

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

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

（请记住，我使用redux-form-material-ui抽象onChange和value的授权，并允许你使用所有材料-ui的AutoComlete的道具直接在redux-form的<Field/>）

希望这可以帮助 ：）

Answer 2

你如何接近它，是通过调度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处理程序获取用户输入，使用上面作为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)}
/>

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