reactjs中的移动数字变量

大家好，我是react js新手，当我尝试编写手机号码变体代码时，我被卡住了，我看到了firebase文档，但我不明白，请告诉我如何使用firebase编写手机变体代码

下面我分享我的代码，我想包括我的firebase移动静脉曲张逻辑

createAccount.js

import React，{useState}来自“React”；
从'react router dom'导入{Link}；
导入“/CreateAccount.css”；
从“../firebase”导入firebase；
进口{
集装箱，
形式，
FormGroup，
标签，
上校，
输入，
按钮
卡片
名片夹，
一行
万向节，
卡尺
}来自“反应带”；
常量CreateAccout=（）=>{
const[number，setNumber]=使用状态（“”）；
const[friend，setFriend]=useState（“”）；
常量handleClick=（）=>{
让recaptcha=new firebase.auth.RecaptchaVerifier（'recaptcha'）；
让PhoneNumber=getPhoneNumberFromUserInput（）；
firebase.auth（）
.然后（）
.catch（（错误）=>{
console.log（错误）；
})
}
返回(
创建帐户
手机号码
setNumber（e.target.value）}
/>
儿时的朋友
setFriend（e.target.value）}
/>
拯救


癌变
)
}
导出默认CreateAccout；

  import React, { useState } from 'react';
    import { Link } from 'react-router-dom';
    import './CreateAccount.css';
    import firebase from '../firebase';
    import {
        Container,
        Form,
        FormGroup,
        Label,
        Col,
        Input,
        Button,
        Card,
        CardBody,
        Row,
        CardHeader,
        CardFooter
    } from 'reactstrap';
    
    const CreateAccout = () => {
    
        const [number, setNumber] = useState('');
        const [friend, setFriend] = useState('');
    
     const handleClick = () => {
        let recaptcha = new firebase.auth.RecaptchaVerifier('recaptcha');
        let phoneNumbar = getPhoneNumberFromUserInput();
        firebase.auth().signInWithPhoneNumber(recaptcha,phoneNumbar)
        .then()
        .catch((error)=>{
            console.log(error);
        })
     }
    
    
        return (
            <Container className='text-center'>
                <Row>
                    <Col lg={6} className='offset-lg-3 mt-5'>
                        <Card>
                            <Form>
                                <CardHeader>Create An Account</CardHeader>
                                <CardBody>
                                    <FormGroup row>
                                        <Label for='email' sm={3}>
                                            Mobile Number
                                        </Label>
                                        <Col sm={9}>
                                            <Input
                                                type='number'
                                                name='Numbar'
                                                id='Number'
                                                placeholder='Enter Your Mobile Number'
                                                value={number}
                                                onChange={(e) => setNumber(e.target.value)}
                                            />
                                        </Col>
                                    </FormGroup>
                                    <FormGroup row>
                                        <Label for='password' sm={3}>
                                            ChildHood Friend
                                        </Label>
                                        <Col sm={9}>
                                            <Input
                                                type='text'
                                                name='text'
                                                id='text'
                                                placeholder='Enter Your Childhood Friend'
                                                value={friend}
                                                onChange={(e) => setFriend(e.target.value)}
                                            />
                                        </Col>
                                    </FormGroup>
                                </CardBody>
                                <CardFooter>
                                    <Link to='/otpPage'><Button type='submit' block color='primary' onClick={handleClick} >
                                        SAVE
                                    </Button>
                                    </Link><br />
                                    <Button type='submit' block color='primary' >
                                        CANCLE
                                    </Button>
                                </CardFooter>
                            </Form>
                        </Card>
                    </Col>
                </Row>
            </Container>
        )
    }
    
    export default CreateAccout;