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

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

0 голосов
/ 31 августа 2018

Я довольно долго искал, но не нашел решения, на которое надеялся.

Моя цель - показывать предложения пользователю, когда он начинает вводить текст. Скажем, у меня есть массив имен, которые будут предложены. Я предполагаю, что будет обработчик onChange, но я не уверен, как реализовать это эффективно.

Я благодарен за любое предложение!

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

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

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

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

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

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

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

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

0 голосов
/ 01 сентября 2018

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

Затем используйте ввод текстового поля, который передается выше как 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)}
/>

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

...