React Formik Field onChange 事件句柄

Posted 2023-03-23

【中文标题】React Formik Field onChange 事件句柄

【英文标题】：React Formik Field onChange event handle

【发布时间】：2019-03-22 23:38:50

【问题描述】：

我正在尝试在 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>

任何提示/想法？

【参考方案1】：

我发现将 onBlur:handleBlur 引入 Formik 字段的一个问题是它覆盖了 Formik 验证。

使用onKeyUp=handleChange

这解决了上述问题

【讨论】：

选择元素的内容

选择元素、复选框、单选按钮、上传等...

选择一个可以使用onClick

【参考方案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/>

【讨论】：

另一种方法是使用 onKeyUp 或 onKeyDown，该函数可以与 Field 一起使用，并且该函数类似于 onChange

选择什么？ onKeyUp 不适用于选择

@HassanAliShahzad 你是用鼠标点击它吗:) ...除了笑话，我也很好奇如何为选择执行此操作。似乎InputProps 在普通

上不可用

【参考方案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>