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

但我收到警告：

组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。

现在我的代码如下所示：

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

这解决了上述问题

Answer 2

您必须使用 Field 的 InputProps，如下所示...

import { TextField } from 'formik-material-ui';

<Field
  type="radio" 
  name="players" 
  value="2"
  component={TextField} 
  InputProps={{ onBlur:handleBlur }}/>

要在 Field 中使用 InputProps，您需要使用 formik-material-ui 库中的组件 TextField。

另一种方法是使用 onKeyUp 或 onKeyDown，这些函数可以与 Field 一起工作，并且函数就像 onChange

<Field 
  type="radio" 
  name="players" 
  value="2" 
  onKeyUp =this.handleChange/>