pjchender · February 24, 2020 03:01 · pjchender · Feb 24, 2020
diff --git a/RadioButtonForm.js b/RadioButtonForm.js
 import React from 'react';
 import { Formik, Form, useField } from 'formik';

 const GENDERS = [
  {
    name: 'other',
    value: 0,
  },
  {
    name: 'male',
    value: 1,
  },
  {
    name: 'female',
    value: 2,
  },
 ];

 const InputRadio = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  // NOTICE:
  // 不將 <input /> 中的 value 轉成 String 時
  // 在 field 中的 value 會是 Number，但在 meta 中的 value 會是字串

  return (
    <>
      <div>
        <input type="radio" {...field} {...props} />
        <label htmlFor={props.id || props.name}>{label}</label>
      </div>
    </>
  );
 };

 const RadioButtonForm = () => {
  return (
    <>
      <Formik
        initialValues={{
          gender: '',
        }}
      >
        {() => (
          <Form>
            {GENDERS.map(({ name, value }) => {
              return (
                <InputRadio
                  label={value}
                  id={value}
                  type="radio"
                  name="gender"
                  // ⚠️ 把 value toString 才能正確運作
                  value={value.toString()}
                  key={value}
                />
              );
            })}
          </Form>
        )}
      </Formik>
    </>
  );
 };

 export default RadioButtonForm;
	import React from 'react';
	import { Formik, Form, useField } from 'formik';

	const GENDERS = [
	{
	name: 'other',
	value: 0,
	},
	{
	name: 'male',
	value: 1,
	},
	{
	name: 'female',
	value: 2,
	},
	];

	const InputRadio = ({ label, ...props }) => {
	const [field, meta] = useField(props);
	// NOTICE:
	// 不將 <input /> 中的 value 轉成 String 時
	// 在 field 中的 value 會是 Number，但在 meta 中的 value 會是字串

	return (
	<>
	<div>
	<input type="radio" {...field} {...props} />
	<label htmlFor={props.id \|\| props.name}>{label}</label>
	</div>
	</>
	);
	};

	const RadioButtonForm = () => {
	return (
	<>
	<Formik
	initialValues={{
	gender: '',
	}}
	>
	{() => (
	<Form>
	{GENDERS.map(({ name, value }) => {
	return (
	<InputRadio
	label={value}
	id={value}
	type="radio"
	name="gender"
	// ⚠️ 把 value toString 才能正確運作
	value={value.toString()}
	key={value}
	/>
	);
	})}
	</Form>
	)}
	</Formik>
	</>
	);
	};

	export default RadioButtonForm;