我想从 react-phone-number-input 向 PhoneInput 组件提供一个 Material 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} />
);
};
最佳答案
所以我能够使用以下方法让它工作。任何关于如何改进这一点的建议都非常受欢迎。
我有一个名为 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}
/>
...
关于javascript - 如何在 react-phone-number-input 中使用 material-ui TextField,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60909788/