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

Question

我想從 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} />
   );
  };

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

還有一個用於 Material UI v5（或 MUI）的包，稱為Mui tel input

簡單的使用方法。 電話驗證也可用。

在此處查看文檔： https ://github.com/viclafouch/mui-tel-input/blob/master/README.md

 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} /> }