Два входа в поле ReduxForm - PullRequest
Новая
       30

Два входа в поле ReduxForm

0 голосов
/ 29 июня 2019

У меня есть ReduxForm, и там у меня есть компонент, который состоит из двух различных типов входов: группа переключателей и текстовое поле номера. Есть ли способ сохранить в ReduxForm Field два параметра: значение отмеченного переключателя и значение текстового поля? Как это организовать, используя свойства format, normalize и функцию onChange? В настоящее время у меня есть что-то вроде (упрощенно): 

export const ComplexField = (props) =>
const { onChange, ... } = props
return(<div>
  <RadioGroup onChange=... />
  <InputTextField onChange=...>
</div>)

По сути, основная проблема, которую я имею, - это поток данных из двух полей в ReduxForm Field. Я попытался ввести format в поле конфигурации json следующим образом: 

format: (radioVal, inputVal) => [radioVal, inputVal]

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

Я пытаюсь добиться следующего поведения: у меня есть 4 переключателя, а последняя связана с текстовым полем числового типа. Когда я выбираю последнюю радиокнопку, текстовое поле активируется, и пользователю разрешается вводить значение. И проблема в том, что я не могу просто разделить два компонента на два разных Fields из-за очень строгого позиционирования html. Есть ли способ правильно взаимодействовать с двумя компонентами в одном поле ReduxForm или это вообще невозможно?

1 Ответ

0 голосов
/ 01 июля 2019

Мне удалось решить проблему следующим образом. Сначала укажите параметр format и что возвращать в самом начале, когда значение равно null: 

format: val => val || ['pli_0', null]

Здесь видно, что я использую массив для значения, которое записывает redux store. Затем метод onChange в компоненте группы переключателей: 

onChange={({ checked }) => {
    if (checked) {
      onChange([option.value, option.inputVal])
    }   
}}

И поле ввода текста: 

onChange={(val) => {
  onChange([value[0], val])
}}

Отдельные onChange методы получают разные значения, поскольку переключатели и поле ввода - это два разных поля формы. Но тогда component, в который они включены, получает то, что я указываю - массив значений.

...