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

Answer 3

我发现了一个对我很有效的技巧，你可以使用 formik 的“值”并调用一个将“值”作为参数传递的方法并使用新值执行操作。

const handleUserChange = (userId: number) => {
    //userId is the new selected userId
  };


 <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
        enableReinitialize
      >
        {({ isValid, isSubmitting, values }) => (
          <Form>
            <table className="table">
              <tbody>
                <tr>
                  <td>Users</td>
                  <td>
                    <Field name="userId" className="form-control" as="select">
                      <option value="">--select--</option>
                      {data.Users.map((user, index) => (
                        <option key={user.id} value={user.id}>{`User ${index + 1}`}</option>
                      ))}
                    </Field>
                  </td>
                </tr>
                {handleUserChange(values.userId)}
              </tbody>
            </table>

            <div className="row">
              <div className="col-sm-12">
                <SubmitButton label="Save" submitting={isSubmitting} disabled={!isValid || isSubmitting} />
              </div>
            </div>
          </Form>
        )}
      </Formik>

Answer 4

 <Grid item xs={12}>
       <Field
           type="email"
           name="email"
           as={FormField}
           label="Email *"
           validate={validate}
           value={emailId}
           onChange={e => {
               setFieldTouched('type');
               handleChange(e)
           }}
       />
       <MDBox>
           <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
               {<div style={{
                   cursor: 'pointer', marginTop: styleMt
               }} onClick={emailStatus != 'ACTIVE' ? handleRestore : ''}>{errorMessages}</div>}
           </MDTypography>
       </MDBox>
   </Grid>