javascript - React Formik Field onChange 事件句柄

Question

我正在尝试处理 React Formik 中 Field 组件的 onChange，但它不起作用。我还尝试通过以下方式在 Formik 组件之外处理它:

handleChange(e) {
  console.log('changing');
}
<Field type="radio" name="players" value="1" onChange={e => this.handleChange(e)}/>

但我收到警告:

A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa).

现在我的代码是这样的:

<Formik
  onChange={() => {
    console.log('changing');
  }}
  onSubmit={(values) => {
    console.log('submitted');
  }}
>
{({ isSubmitting, handleChange }) => (
  <Form>
    <InputWrapper>
       <span>1</span>
       <Field type="radio" name="players" value="1" onChange={handleChange}/>
       <span>2</span>
       <Field type="radio" name="players" value="2" onChange={handleChange}/>
    </InputWrapper>
    <button type="submit" disabled={isSubmitting}>
       {isSubmitting ? 'Loading..' : 'Start'}
    </button>
  </Form>
)}
</Formik>

有任何提示/想法吗？

Answer 1

我发现将 onBlur:handleBlur 引入您的 Formik 字段时会出现一个问题，即它会覆盖 Formik 验证。

使用onKeyUp={handleChange}

这解决了上述问题