如何将material-ui TextField与react-phone-number-input

Question

我想从react-phone-number-input 向PhoneInput 组件提供一个材质UI TextField 组件作为道具inputComponent。但是，我似乎无法成功应用参考。尽管我看到 Material UI TextField 组件渲染到 UI 并且状态已成功使用该值进行更新，但在键入第一个值后，它仍然会失去焦点。import React, { forwardRef, createRef } from 'react';import { TextField } from '@material-ui/core';import 'react-phone-number-input/style.css';import PhoneInput from 'react-phone-number-input';const SampleComponent = ({ handleChange }) => {const phoneInput = forwardRef((props, ref) => {return (  <TextField    inputRef={ref}    fullWidth    label="Phone Number"    variant="outlined"    name="phone"    onChange={handleChange}  />  );});const ref = createRef();return (    <PhoneInput ref={ref} inputComponent={phoneInput} />   );  };

Answer 1

所以我能够使用以下方法让它工作。任何有关如何改进这一点的建议都非常受欢迎。

我有一个单独的文件，名为PhoneNumber.jsx

import { forwardRef } from 'react'

import TextField from '@material-ui/core/TextField'

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({

  input: {

    backgroundColor: '#fff'

  }

}))

const phoneInput = (props, ref) => {

  const classes = useStyles()

  return (

    <TextField

      {...props}

      InputProps={{

        className: classes.input

      }}

      inputRef={ref}

      fullWidth

      size='small'

      label='Phone Number'

      variant='outlined'

      name='phone'

    />

  )

}

export default forwardRef(phoneInput)

还有我的表单文件：

import PhoneInput from 'react-phone-number-input'

import CustomPhoneNumber from '../components/prebuilt/PhoneNumber'

...

<PhoneInput

   placeholder='Enter phone number'

   value={phone}

   onChange={setPhone}

   inputComponent={CustomPhoneNumber}

/>

...

Answer 2

import React from 'react'

import { MuiTelInput } from 'mui-tel-input'

const MyComponent = () => {

  const [value, setValue] = React.useState('')

  const handleChange = (newValue) => {

    setValue(newValue)

  }

  return <MuiTelInput label="Phone" fullWidth value={value} onChange={handleChange} />

}

Answer 3

这是我使用 MUI v5 的组件：

表单字段

//...

const [phone, setPhone]: any = useState();

const handlePhone = (e: ChangeEvent<HTMLInputElement> )=>{

        setPhone(e.target.value)

    }

<TextField onChange={handlePhone} value={phone} variant="outlined"

                                                                   sx={{ '& .MuiOutlinedInput-input': {display: 'flex'}}}

                                                                   InputProps={{

                                                                       inputComponent: PhoneField as any,

                                                                       inputProps: {

                                                                           name: "phone",

                                                                           control: control,

                                                                           international: true,

                                                                           defaultCountry: "US",

                                                                           value: phone,

                                                                       }/>

电话字段

interface PhoneNumberProps {

    value?: string;

    placeholder?: string;

    onChange: (event: { target: { value: string } }) => void;

    name: string;

}

export const PhoneField = forwardRef<HTMLElement, PhoneNumberProps>((props, ref:any) => {

    const { onChange, name, placeholder, value, ...other } = props;

    return <PhoneInputWithCountry name={name} ref={ref} placeholder="1 213 123 4567" onChange={(value: string)=>onChange({target:{value}})} {...other}/>

})