Добавление настраиваемой опоры в поле RadioGroup с помощью React Final Form

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

Хотелось бы просто иметь настраиваемую задачу, такую ​​как carPrice ниже, но в противном случае это нормально. Есть идеи, пожалуйста? это сводит меня с ума сейчас. Не нашел ничего в документации для ReactJS или Final Form об этом или где-либо еще, что я смотрел.

Прокомментированные строки - это всего лишь некоторые вещи, которые я пробовал в качестве примеров, но их было гораздо больше.

Я знаю, как это сделать с помощью jQuery, но мне очень хотелось больше узнать о React. Особенно Final Form.

Конечно, наиболее очевидным было бы использование значения с числом integer / float, но это вызывает ошибку, связанную с тем, что защищенный «тип» должен быть строкой.

Нужно ли дойти до изготовления хендлера и какой? Конечно, есть способ просто добавить его в поле в качестве настраиваемой опоры?

Я мог бы сделать это с помощью jQuery, но мне очень хотелось придерживаться ReactJS и Final form.

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

<RadioGroup row>
  <FormControlLabel
    label="Ford"
    control={
      <Field
        name="Ford"
        component={Radio}
        type="radio"
        defaultValue={0}
        value={11}
        //onClick={e => alert(e.target.value)}
        //carPrice={555}
        // value={`${55}`}
        // value={888 ? String(yourValue) : null}
        // props = {{ myPrice: 475 }}

      />
    }
  />

reactjs react-props react-final-form radio-group
person Gary Carlyle Cook    schedule 24.09.2019    source источник
comment
Здравствуйте, я не знаком с используемыми вами зависимостями, однако я знаю, что библиотека semantic-ui-react прекрасно обрабатывает радиогруппы со значением в виде числа (на самом деле значение может быть любым: строка, логическое значение, число и т. Д.) : react.semantic-ui.com/addons/radio/#types -radio-group Я не знаю, поможет ли это, но это может быть выход, если нет решения вашей проблемы   -  person Orlyyn    schedule 07.10.2019

Ответы (1)


arrow_upward
2
arrow_downward

Если я правильно понимаю требования:

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

Я думаю, что корень проблемы в том, что компонент Radio требует props с другой формой, а не с формой, в которой react-final-form вводит их. Свойства response-final-from выглядят следующим образом (дополнительная информация о FieldRenderProps здесь):

const { input, meta } = props;
const { name, onChange, value } = input;

Вам нужно будет написать компонент-оболочку вокруг Radio, чтобы преобразовать реквизиты в требуемую форму. Вы используете material-ui? Уже существует библиотека, которая сделает это за вас: final-form-material-ui < / а>

Набор компонентов оболочки для облегчения использования Material-UI с Final Form.

ОБНОВЛЕНИЕ. Приведенный ниже фрагмент кода работает некорректно. Прокрутите его до обновленного ответа.

Вот как будет выглядеть код:

import { FormControlLabel, RadioGroup } from '@material-ui/core';
import { Radio } from 'final-form-material-ui';
import { Field } from 'react-final-form';

// ...

    <RadioGroup row>
        <FormControlLabel
          label="Ford"
          control={<Field name="carPrice" component={Radio} type="radio" value={475} />}
        />
        <FormControlLabel
          label="Mercedes"
          control={<Field name="carPrice" component={Radio} type="radio" value={555} />}
        />
    </RadioGroup>

Похоже, что проблема с состоянием переключателя "Выбрано", когда его значение равно number, а не string. Как вы можете видеть в этом примере codeandbox значение формы изменяется, но переключатели не отражают этого.

ОБНОВЛЕННОЕ РЕШЕНИЕ:

Вы можете сохранить весь объект автомобиля (марку и цену) в форме state.

<Form
  initialValues={{ car: { brand: 'Ford', price: 475 } }}
  // ...

И используйте функции format и parse FieldProps для достижения рабочего состояния с проверкой и получения правильного значения состояния формы.

<FormControlLabel
  label={"Ford"}
  control={
    <Field
      name="car"
      format={car => car.brand}
      parse={() => ({ brand: "Ford", price: 475 })}
      component={Radio}
      type="radio"
      value={"Ford"}
    />
  }
/>

Вот рабочий пример codeandbox.

person Istvan Szasz    schedule 07.10.2019
comment
Вы совершенно правы. ДЕЙСТВИТЕЛЬНО впечатляет, брат. Эрик, создатель RFF, сказал мне, что это связано с Parse, но я не смог найти хороший пример. Я использовал JSON в Value сейчас, что ж, мой друг сделал это, но позже я обновлю его этим. Большое тебе спасибо. - person Gary Carlyle Cook; 10.10.2019