如何在 react-phone-number-input 中使用 material-ui TextField

Posted 2023-02-22

【中文标题】如何在 react-phone-number-input 中使用 material-ui TextField

【英文标题】：How to use material-ui TextField with react-phone-number-input

【发布时间】：2020-07-09 14:18:47

【问题描述】：

我想从 react-phone-number-input 向 PhoneInput 组件提供一个材质 UI TextField 组件作为 inputComponent 属性。

但是，我似乎无法成功应用 ref。尽管我看到 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 />
   );
  ;

【问题讨论】：

那个帖子解决了你的问题吗？请提供一些反馈将不胜感激。见What should I do when someone answers my question?

嗨！你曾经能够解决这个问题吗？我现在正在尝试同样的事情。谢谢！

作为提醒，我有一个包来解决这个问题。 npmjs.com/package/material-ui-phone-number

【参考方案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
/>
...