如何解决使用失去焦点的自定义输入响应 Formik Mui TextField
我有一个 Formik 表单,其中包含一些 Material UI TextField 组件。除了在执行 onChange() 时失去焦点的一个之外,所有这些都可以正常工作。它有一个 PhoneInput (react-phone-number-input) 组件作为自定义输入。 一切正常(正在保存数据等),但我必须不断点击输入才能继续写入。
我觉得这与裁判有关。当记录 inputRef(PhoneInputRef,由 TextField 提供)时,它看起来不像一个正常的 ref。
Formik 组件(父级)
{...}
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleClickRegister}>
{(props) => <RegisterForm {...props} />}
</Formik>
{...}
表格(儿童)
{...}
const {
values: {
firstName,lastName,email,confirmEmail,password,confirmPassword,phoneNumber,},//Formik methods passed as props
errors,touched,handleChange,handleSubmit,setFieldValue,setFieldTouched,} = props;
{...}
//Formik onChange handler (used by every TextField besides the one containing PhoneInput)
const change = (name,e) => {
e.persist();
handleChange(e);
setFieldTouched(name,true,false);
};
//Custom onChange handler for Formik (used by PhoneInput)
const handleOnChange = (name,value) => {
setFieldValue(name,value);
setFieldTouched(name,false);
};
{...}
{/*NORMAL TEXTFIELD*/}
<TextField
className={classes.inputField}
id="confirmPassword"
name="confirmPassword"
label={t("header.registerDialog.form.labelConfirmPassword")}
value={confirmPassword}
onChange={change.bind(null,"confirmPassword")}
error={touched.confirmPassword && Boolean(errors.confirmPassword)}
helperText={
touched.confirmPassword && errors.confirmPassword ? (
errors.confirmPassword
) : (
<>
<br />
</>
)
}
/>
{/*CUSTOM INPUT TEXTFIELD*/}
<TextField
className={classes.textFieldPhoneInput}
key="textFieldPhone"
ref={textFieldRef}
id="phoneNumber"
name="phoneNumber"
label={t("header.registerDialog.form.labelPhone")}
InputLabelProps={{
className: phoneNumber
? classes.inputFieldPhoneLabel
: classes.inputFieldPhoneLabelEmpty,}}
InputProps={{
inputComponent: ({ inputRef,...rest }) => (
<PhoneInput
{...rest}
key="phoneInput"
ref={inputRef}
international
countryCallingCodeEditable={false}
name="phoneNumber"
defaultCountry="AR"
onChange={(phone) =>
handleOnChange("phoneNumber",phone)
}
labels={phoneLanguage}
value={phoneNumber}
/>
),}}
error={touched.phoneNumber && Boolean(errors.phoneNumber)}
helperText={
touched.phoneNumber && errors.phoneNumber ? (
errors.phoneNumber
) : (
<>
<br />
</>
)
}
/>
{...}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。