[英]React Formik Field onChange event handle
我正在嘗試在 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>
任何提示/想法?
我在將 onBlur:handleBlur 引入 Formik 字段時發現的一個問題是它覆蓋了 Formik 驗證。
使用onKeyUp={handleChange}
這解決了上述問題
您必須使用 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/>
我發現了一個對我很有效的技巧,您可以使用 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.