Предложения по вводу текста в Redux-форме

Как вы можете подойти к этому, - это получить все данные массива, отправив действие 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}
  );
}

Затем используйте текстовое поле ввода, которое передано выше как this.state.name, используя обработчик onChange для получения пользовательского ввода:

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

И в поле возврата введите и текстовое поле с обработчиком onChange:

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

Для меня работает довольно эффективно. Обратной стороной этого подхода является то, что вы сначала извлекаете все данные своего массива, поэтому загрузка занимает больше времени, однако приложению не нужно извлекать данные при каждом вводе пользователя, что упрощает взаимодействие с пользователем.

Обычно вам нужно создать какой-то входной компонент <AuotoComplete /> (или - что обычно можно сделать - использовать какую-то стороннюю библиотеку компонентов, которая будет предоставлять эту функциональность из коробки. Например, материал-интерфейс, реагировать-выбрать, реагировать-самовнушение и т. д. ).

Затем вам нужно будет добавить реквизиты redux-form, <Field /> и onChangevalue к этому компоненту, чтобы он обновил ваш редуктор redux-form.

Реализация должна выглядеть примерно так:

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

Вот рабочий пример, который я создал с material-uiAutoComplete.

(Имейте в виду, что я использовал redux-form-material-ui, который абстрагирует делегирование onChange и value и позволяет использовать весь поток реквизитов AutoComlete material-ui на redux-form<Field/>)

Надеюсь это поможет :)