简体   繁体   English

当您尝试在 PhoneInput(React 和 React-phone-number-input)键入内容时,弹出窗口会自行关闭

[英]Popup closes byself when you try to type something at PhoneInput (React and React-phone-number-input)

TypeError: Cannot read properties of undefined (reading 'name') 

and

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

I belive the problem is when the PhoneInput call function "OnChange" but I don't know how to fix it.我相信问题是当 PhoneInput 调用 function "OnChange" 但我不知道如何解决它。

GitHub Repository GitHub 存储库

Code src: landing-page/resources/js/components/contact-form/contact-form.jsx代码src:landing-page/resources/js/components/contact-form/contact-form.jsx

const inputs = [
..., {
        id: "input-phone",
        name: "phone",
        type: "text",
        errorMessage: "Por favor, preencha o seu testes",
        pattern: "^[0-9]{2} [0-9]{4}-[0-9]{4}$",
        label: "Celular",
      },
const handleSubmit = (e) => {
    e.preventDefault();
};

const onChange = (e) => {
        setValues({ ...values, [e.target.name]: e.target.value });
        console.log(values);
};
return(
<PhoneInput
        key={item.id}
        {...item}
        international
        withCountryCallingCode
        countryCallingCodeEditable={false}
        error={true}
        defaultCountry="BR"
        flags={flags}
        flagUrl="https://flag.pk/flags/4x3/{xx}.svg"

        value={values[item.name]}
        onChange={onChange}
/>
);

The problem was solved.问题解决了。 I create a new function to call at "onChange".我创建了一个新的 function 来调用“onChange”。

const onPhoneChange = (phoneNumber) => {
   setValues({ ...values, phone: phoneNumber });
}

and

<PhoneInput
  ...
  onChange={onPhoneChange};
/>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何添加自己定制的 inputComponent JSX<input> 到反应电话号码输入PhoneInput? - How does one add one's own bespoke inputComponent JSX <input /> to a react-phone-number-input PhoneInput? 反应电话号码输入验证失败 - react-phone-number-input validation failure 使用反应电话号码输入时如何为电话输入的边框颜色设置无 - How to set none for border color of the phone input when using react-phone-number-input 如何使用Yarn安装react-phone-number-input? - How to install react-phone-number-input with Yarn? "没有国家选择器的 react-phone-number-input" - react-phone-number-input without the country selector 如何使用 react-phone-number-input 库与 Formik 成为朋友? - How to friend Formik with react-phone-number-input lib? 如何使用 react-phone-number-input 插入数据?,插入电话号码时出现验证错误 - How can I insert a data using react-phone-number-input?, validation error when I'm inserting a phone number React-Phone-Number-Input + React-Hook-Form:如何在控制器验证中获取当前国家代码? - React-Phone-Number-Input + React-Hook-Form: How to get current country code in controller validation? 从 react-phone-number-input 导入电话号码验证器时出错 npm package - Getting an error while importing Phone number Validator from the react-phone-number-input npm package 如何将 react-phone-number-input 添加到-react-final-form? - How to add react-phone-number-input to -react-final-form?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM