Question

我无法在Formik自己的文档中或通过互联网找到如何实现单选按钮的示例。我正在尝试将以下内容转换为单选按钮

<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，但也无法正常工作

Answer 1

首先创建输入组件：

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>
  );
};

然后创建一个类似的广播组，注意名称应相同：

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

如何使用Formik创建单选按钮？

1 个答案: