Как создать радио-кнопки с помощью Formik? - PullRequest
Новая
       4

Как создать радио-кнопки с помощью Formik?

0 голосов
/ 07 мая 2020

Мне не удалось найти примеры того, как реализовать переключатели в собственной документации Formik или в inte rnet. Я пытаюсь преобразовать приведенное ниже в качестве переключателей 

<Form>
  <Field name="prices" as="select">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
  </Field>
</Form>

Я попытался изменить as на radio или удалить его и использовать type вместо radio, но это тоже не подойдет

1 Ответ

0 голосов
/ 07 мая 2020

Сначала создайте компонент Input: 

const RadioButton = ({
  field: { name, value, onChange, onBlur },
  id,
  label,
  className,
  ...props
}) => {
  return (
    <div>
      <input
        name={name}
        id={id}
        type="radio"
        value={id} // could be something else for output?
        checked={id === value}
        onChange={onChange}
        onBlur={onBlur}
        className={classNames('radio-button')}
        {...props}
      />
      <label htmlFor={id}>
        {label}
      </label>
    </div>
  );
};

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

           <Field
              component={RadioButton}
              name="radioGroup"
              id="radioOption1"
              label="Choose this option"
            />
            <Field
              component={RadioButton}
              name="radioGroup"
              id="radioOption2"
              label="Or choose this one"
            />
...