Question

我正在构建的应用程序会根据我使用Formik和libphonenumber.js库选择的国家/地区显示不同的电话号码格式。

这是代码：

  const selectCountry = (e:any, phoneNumber:string) => {
    const countryPhoneNumberFormat = new AsYouType(e.target.value).input(phoneNumber)
    console.log(countryPhoneNumberFormat)
    // KR -> 012-2934-2937
    // SR -> 0123-9342

  }

  return (
    <Formik initialValues={{country: '', phoneNumber: ''}} onSubmit={(values) => submitForm(values)}>
      {({ values, handleChange, handleSubmit }) => (
        <form onSubmit={handleSubmit}>
        <select name='country' onChange={(e) => selectCountry(e, values.phoneNumber)}>
          <option value=''>Country</option>
          <option value='KR'>Korea</option>
          <option value='SG'>Singapore</option>
        </select>
        <input type='text' name='phoneNumber' placeholder={'Enter your phone number'} value={values.phoneNumber} onChange={handleChange} style={{width: '50%'}} />
        </form>
      )}
    </Formik>
  )

因此，当我在选择字段中选择韩国或新加坡时， selectCountry 函数将读取更改，并使用libphonenumber.js库中的 new AsYouType ，我可以格式化电话号码。

我在React Hook中使用useState更改状态并将其放置在 phoneNumber输入值内，但似乎Formik不在Formik之外读取状态更改。

是否可以在 selectCountry 函数内部使phoneNumber输入读取并显示 countryPhoneNumberFormat 变量？

Answer 1

您需要在handleChange函数中使用Formiks setFieldValue或onChange方法。它可以像这样工作：

  const selectCountry = (e:any, phoneNumber:string) => {
    return new AsYouType(e.target.value).input(phoneNumber);
  }

  return (
    <Formik initialValues={{country: '', phoneNumber: ''}} onSubmit={(values) => submitForm(values)}>
      {({ values, handleChange, handleSubmit }) => (
        <form onSubmit={handleSubmit}>
        <select name='country' 
                onChange={(e) => {
                    setFieldValue('phoneNumber', selectCountry(e, values.phoneNumber));
                }
        }>
          <option value=''>Country</option>
          <option value='KR'>Korea</option>
          <option value='SG'>Singapore</option>
        </select>
        <input type='text' name='phoneNumber' placeholder={'Enter your phone number'} value={values.phoneNumber} onChange={handleChange} style={{width: '50%'}} />
        </form>
      )}
    </Formik>
  )

选择某个国家/地区后，表单phoneNumber的值将设置为selectCountry的返回值。

如何使用带有Formik的React.js根据选择字段的值更新输入字段？

1 个答案: