Как создать пользовательский компонент раскрывающегося поля с помощью Redux-Form V6?

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

Проблема заключается в том, что пользовательский выпадающий компонент не подключается к состоянию, даже если он отображает ОК.

В документах примеры выполняются так:

<Field name="favoriteColor" component="select">
  <option></option>
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</Field>

Я ищу подход «plug-and-play», где я могу зайти в компонент и передать в реквизит массив данных:

Form.js :

      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          component={DropDownSelect}
          people={people}
          className="form-control"
        >
        </Field>
      </div>

DropDownSelect.js:

import React from 'react';

import styles from './styles.css';

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
  renderSelectOptions = (person) => {
    return (
      <option key={person} value={person}>{person}</option>
    );
  }

  render() {
    return (
      <select>
        {this.props.people.map(this.renderSelectOptions)}
      </select>
    );
  }
}


export default DropDownSelect;

Когда я проверяю Redux DevTools, значение поля никогда не заполняется при взаимодействии с выпадающим списком:

введите описание изображения здесь

Я выбрал значение для обоих полей, но только «effDate» заполняет значение, а «dropDownSelect» остается в качестве зарегистрированного поля без значения.

Редактировать:

Основываясь на этом примере, я думаю, что это можно сделать так:

function DropDownSelect(person) {
  return (
    <option key={person} value={person}>{person}</option>
  );
}

export default DropDownSelect;


      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          component="select"
          // component={DropDownSelect}
          // people={people}
          className="form-control"
        >
          {people.map(DropDownSelect)}
        </Field>

Это работает на данный момент, хотя было бы идеально, если бы я мог реализовать это как полностью отдельный компонент (как указано в начальном вопросе), поэтому я могу использовать крючки жизненного цикла в том случае, если поле будет зависеть от других полей.

javascript,reactjs,html-select,redux-form,

9

Ответов: 1

13 принят

Чтобы сделать отдельный пользовательский компонент, который обрабатывает раскрывающийся список, мне нужно включить реквизиты «ввода», чтобы подключить его к редуктору формы:

Пользовательский компонент:

/**
*
* DropDownSelect
*
*/

import React from 'react';

import styles from './styles.css';

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function

  renderSelectOptions = (person) => (
    <option key={person} value={person}>{person}</option>
  )

  render() {
    const { input, label } = this.props;
    return (
      <div>
        {/* <label htmlFor={label}>{label}</label> */}
        <select {...input}>
          <option value="">Select</option>
          {this.props.people.map(this.renderSelectOptions)}
        </select>
      </div>
    );
  }
}

// function DropDownSelect(person) {
//   return (
//     <option key={person} value={person}>{person}</option>
//   );
// }

DropDownSelect.propTypes = {
  people: React.PropTypes.array,
  input: React.PropTypes.object,
  label: React.PropTypes.string,
};

export default DropDownSelect;

поле:

      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          // component="select"
          label="dropDownSelect"
          component={DropDownSelect}
          people={people}
          className="form-control"
        >
          {/* {people.map(DropDownSelect)} */}
        </Field>
      </div>
JavaScript, reactjs, HTML-выберите, перевождь-формы,
Похожие вопросы
Яндекс.Метрика