如何将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.jsximport { forwardRef } from 'react'import TextField from '@material-ui/core/TextField'import { makeStyles } from '@material-ui/core/styles'const useStyles = makeStyles(theme => ({&nbsp; input: {&nbsp; &nbsp; backgroundColor: '#fff'&nbsp; }}))const phoneInput = (props, ref) => {&nbsp; const classes = useStyles()&nbsp; return (&nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; {...props}&nbsp; &nbsp; &nbsp; InputProps={{&nbsp; &nbsp; &nbsp; &nbsp; className: classes.input&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; inputRef={ref}&nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; size='small'&nbsp; &nbsp; &nbsp; label='Phone Number'&nbsp; &nbsp; &nbsp; variant='outlined'&nbsp; &nbsp; &nbsp; name='phone'&nbsp; &nbsp; />&nbsp; )}export default forwardRef(phoneInput)还有我的表单文件：import PhoneInput from 'react-phone-number-input'import CustomPhoneNumber from '../components/prebuilt/PhoneNumber'...<PhoneInput&nbsp; &nbsp;placeholder='Enter phone number'&nbsp; &nbsp;value={phone}&nbsp; &nbsp;onChange={setPhone}&nbsp; &nbsp;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> )=>{&nbsp; &nbsp; &nbsp; &nbsp; setPhone(e.target.value)&nbsp; &nbsp; }<TextField onChange={handlePhone} value={phone} variant="outlined"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;sx={{ '& .MuiOutlinedInput-input': {display: 'flex'}}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;InputProps={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputComponent: PhoneField as any,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputProps: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name: "phone",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;control: control,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;international: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;defaultCountry: "US",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: phone,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}/>电话字段interface PhoneNumberProps {&nbsp; &nbsp; value?: string;&nbsp; &nbsp; placeholder?: string;&nbsp; &nbsp; onChange: (event: { target: { value: string } }) => void;&nbsp; &nbsp; name: string;}export const PhoneField = forwardRef<HTMLElement, PhoneNumberProps>((props, ref:any) => {&nbsp; &nbsp; const { onChange, name, placeholder, value, ...other } = props;&nbsp; &nbsp; return <PhoneInputWithCountry name={name} ref={ref} placeholder="1 213 123 4567" onChange={(value: string)=>onChange({target:{value}})} {...other}/>})