reactjs 输入时按下提交键在react-phone-input-international中不起作用

qmelpv7a  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(86)

我使用的是来自react-phone-input-international的PhoneInput,以及formik作为表单生成器,当我尝试在enter press上使用类型submit时,它不起作用。

<form onSubmit={formik.handleSubmit}>
    <PhoneInput
        name="mobileNumber"
        country={'in'}
        value={formik.values.mobileNumber}
        placeholder=""
        countryCodeEditable={false}
        onChange={(value, country, e, formattedValue) => {
            formik.setValues({
                ...formik.values,
                "mobileNumber": formattedValue && formattedValue.replace(/ /g, '')
            })
        }
        }
    />
    <Box className="send-otp">
        <Button
            otpBtn
            type='submit'
            name={(t(`btn.send_otp`))}
        />
    </Box>
</form>

我尝试输入提交按钮,但不工作。这里是codesandbox https://codesandbox.io/s/phoneinput-react-gybgzd

hgqdbh6s

hgqdbh6s1#

您的解决方案是添加另一个事件

<PhoneInput
        name="mobileNumber"
        country={"in"}
        value={formik.values.mobileNumber}
        style={{ width: "unset" }}
        placeholder=""
        onEnterKeyPress={()=>handleSubmit(formik.values)} // <-- here
        countryCodeEditable={false}
        onChange={(value, country, e, formattedValue) => {
          formik.setValues({
            ...formik.values,
            mobileNumber: formattedValue && formattedValue.replace(/ /g, "")
          });
        }}
      />

相关问题