reactjs - React Formik Mui TextField 与自定义输入失去焦点

Question

我有一个 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, true, 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
    ) : (
      <>
        &nbsp;
        <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
      ) : (
        <>
          &nbsp;
          <br />
        </>
      )
    }
/>

{...}

标签： reactjsinputmaterial-uiuitextfieldfocus