我想从react-phone-number-input作为inputComponent道具向PhoneInput组件提供一个实质性的UI TextField组件。
但是，我似乎无法成功应用引用。尽管我看到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}
/>
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句