如何在react formik单选字段上使用onChange属性

Question

每当我单击不同的单选按钮时，我都希望使用 onchange 函数。但每当我尝试这样做时，formik 的默认行为就会丢失。

const initialValues = {
hasParent:"no"
}

const handleParentRadioChange = (val) => {
    if (val === 'yes') {
      alert('true');
    } else {
      alert('false');
    }
  };
const submitData = (value) =>{
  console.log(value); 
}


<Formik
   initialValues={initial}
   onSubmit={submitData}
  >
    <Field
    onChange={() => handleParentRadioChange('yes')}
    type="radio"
    name="hasParent"
    value="yes"
    />
    Yes
 <Field
    onChange={() => handleParentRadioChange('no')}
    type="radio"
    name="hasParent"
    value="no"
    />
    No
</Formik> 

如何在 formik 字段上执行 onChange 而不丢失默认的 formik 属性？

Answer 1

onChange 属性在 formik radio 中不起作用...您可以通过 onClick 实现相同的效果。 https://formik.org/docs/examples/radio-group

Answer 2

与文档相同，但不使用 formik Feild 组件

   <div>
  <Formik
    initialValues={{
      picked: '',
    }}
    onSubmit={async (values) => {
      await new Promise((r) => setTimeout(r, 500));
      alert(JSON.stringify(values, null, 2));
    }}
  >
    {({ values, handleChange, handleBlur }) => (
      <Form>
        <div id="my-radio-group">Picked</div>
        <div role="group" aria-labelledby="my-radio-group">
          <label>
            <input
              type="radio"
              name="picked"
              value="One"
              checked={values.picked === 'One'}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            One
          </label>
          <label>
            <input
              type="radio"
              name="picked"
              value="Two"
              checked={values.picked === 'Two'}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            Two
          </label>
          <div>Picked: {values.picked}</div>
        </div>

        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
</div>