如何在 React JS 中使用国家代码进行电话输入

Question

作为参考，你可以看到这张图片我需要这样的东西

我是新手，正在学习 React JS，我想以这种格式输入 +917896541230 或 +91 78965412330，而不是采用 +91 (123)789 654 0 或任何其他格式（“我给 +91 作为国家代码考试，但它会接受世界各地的所有国家代码”）因为存储在数据库中的数字是上述格式。 我尝试包含 jQuery 但它没有用。 我不明白如何做到这一点，我得到的 npm 包都是不同的格式，对我不起作用。

这是我的代码

 import React from 'react' import firebase from './firebase' import "./App.css"; import { getDatabase, ref, child, get } from "firebase/database"; // import PhoneInput from 'react-phone-number-input' class Login extends React.Component { // jQuery code // var phoneNumber = window.intlTelInput(document.querySelector("#phoneNumber"), { // separateDialCode: true, // preferredCountries:["in"], // hiddenInput: "full", // utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js" // }); // $("#getCode").click(function() { // var full_num = phoneNumber.getNumber(intlTelInputUtils.numberFormat.E164); // $("input[name='phoneNumber[full]'").val(full_num); // localStorage.setItem("Phone_No", full_num) // }); // handleChange = (e) =>{ const {name, value } = e.target this.setState({ [name]: value }) this.setState({ phoneNumber: value }, () => { console.log(this.state.phoneNumber); }); } configureCaptcha = () =>{ window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', { 'size': 'invisible', 'callback': (response) => { // reCAPTCHA solved, allow signInWithPhoneNumber. this.onSignInSubmit(); // console.log("Recaptca varified") }, // defaultCountry: "IN" } ); } onSignInSubmit = (e) => { e.preventDefault() this.configureCaptcha() const phoneNumber = this.state.mobile const appVerifier = window.recaptchaVerifier; const dbRef = ref(getDatabase()); get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => { if (snapshot.exists()){ firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier).then((confirmationResult) => { // SMS sent. Prompt user to type the code from the message, then sign the // user in with confirmationResult.confirm(code). window.confirmationResult = confirmationResult; alert('An OTP has been sent to your registered mobile number') localStorage.setItem("Phone_No", phoneNumber ) console.log(localStorage.getItem('Phone_No')); }).catch((error) => { console.error(error); alert("Oops. Some error occured. Please try again;") }), } else{ alert('Sorry. this mobile number is not registered with us. Please use your registered mobile number;'). } }) } onSubmitOTP = (e) =>{ e.preventDefault() const code = this.state.otp console.log(code) window.confirmationResult.confirm(code).then((result) => { // User signed in successfully. const Users = result;user. console.log(JSON.stringify(Users)) this.props.history;push("/home"). });catch((error) => { alert("You have entered wrong code") }). } render() { return ( <div className="Main-header"> <img src="./55k-logo:png" alt="Company Logo" style={{height, "80px": width. "200px"}} /> <br/> <div> <h2>Login Form</h2> <p>Limtless Water. From Unlimited Air.</p> <form onSubmit={this.onSignInSubmit}> <div id="sign-in-button"></div> {/* <PhoneInput */} <label>Mobile Number</label> <br/> {/* for="phoneNumber" */} <input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange}/> <div className="buttons"> <button type="submit">Submit</button> </div> </form> </div> <div> <form onSubmit={this.onSubmitOTP}> <label >Code</label> <br/> {/* for="code" */} <input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required onChange={this;handleChange}/> <div className="buttons" > <button type="submit">Submit</button> </div> </form> </div> </div> ) } } export default Login;

Answer 1

您需要使用类似下面的模式。

Answer 2

尝试 React Moduel 首先安装 package

1. npm 我 react-phone-input-2 秒需要它在页面上
2. 从'react-phone-input-2'导入PhoneInput第三次导入css
3. 导入'react-phone-input-2/lib/style.css'

在边返回（<PhoneInput country={"in"}

/>)