React Formik Field onChange 事件句柄

Question

我正在尝试在 React Formik 中处理 onChange for Field 组件，但它不起作用。我还尝试通过以下方式在 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 }}/>

要在字段中使用 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

使用onKeyUp={handleChange}.当我遇到类似的问题时，这对我有用

Answer 5

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