无法使用 Formik 从自定义字段中提取电话号码输入

Question

我有一个自定义输入字段，用于从库“react-phone-input-2”中制作的电话号码，

我将展示一位同事制作的自定义输入字段的代码

<PhoneInput
      inputProps={{
        name: inputName,
      }}
      country="lb"
      value={phoneNumber}
      placeholder="1234456"
      onChange={phone => handleInputChange(inputName, phone)}
      buttonClass="buttonarrow"
      containerStyle={mainContainer}
      inputStyle={phoneInput(countryCodeBtnWidth, isMobileScreen, hasError)}
      buttonStyle={countryCodeBtn(countryCodeBtnWidth, isMobileScreen)}
      dropdownStyle={dropDownList}
    />

当我导入它并尝试发送 formik 来处理 handleInputOnChange 时，即使所有其他字段都以相同的方式提取，我也无法提取值。

我将发布提取代码

<PhoneInputValidation
                name="phoneNumber"
                value={formik.phoneNumber}
                handleInputChange={formik.handleChange}
                hasError={
                  formik.errors.phoneNumber && formik.touched.phoneNumber
                }
                validationMessage={ERROR_REQUIRED}
                onBlur={formik.handleBlur}
              />

phoneInputValidation 是另一个导入phoneInput的组件，代码如下

<ValidationModule hasError={hasError} validationMessage={validationMessage}>
    <PhoneInputCustom
      handleInputChange={handleInputChange}
      hasError={hasError}
      inputName={name}
      phoneNumber={value}
    />
  </ValidationModule>

ps：在同一表单的其他字段上使用formik.handleChange 可以正常工作

Answer 1

Formik 的 handleChange 接受 2 种类型的参数：

• 字段名称[字符串]：在这种情况下，它返回一个函数，您可以将更改事件或值直接传递给该函数
• 更改事件：在这种情况下，它将从更改事件本身获取要更新的字段名称

https://github.com/jaredpalmer/formik/blob/d4049f2da7e2e8811b498ea8013b77af063c6c8a/packages/formik/src/Formik.tsx#L657-L667

您的代码只使用第一种形式：

<PhoneInput
      ...
      onChange={phone => handleInputChange(inputName, phone)}
      ...
    />

在这种情况下，Formik 将忽略电话值。以下示例应该可以工作。

<PhoneInput
      ...
      onChange={phone => handleInputChange(inputName)(phone)}
      ...
    />

或

<PhoneInput
      ...
      onChange={phone => handleInputChange({ 
        target: { 
          name: inputName
          value: phone 
        }
      })}
      ...
    />

还可以查看电话输入的文档，因为它提供的更改事件数据比仅电话号码更多：

https://github.com/bl00mber/react-phone-input-2#events

Answer 2

你可以使用这样的东西

import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";

export const InputField=()=>{
    const {setFieldValue} = useFormikContext();

    return(<PhoneInput
              prefix={""}
              {...props}
              value={field.value}
              onChange={(val) => {
                  setFieldValue(field.name, val);
              }}
              preferredCountries={["us", "gb"]}
              countryCodeEditable={false}
              country="us"
              inputStyle={{
                  border: "0px",
                  marginLeft: "46px",
                  fontSize: "18px",
              }}
              inputProps={{
                  name: field.name,
              }}
              inputClass={inputClassName + "h-full font-abel"}
              dropdownClass="border-none font-base"
          />)}