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} />
);
};
그래서 다음 방법을 사용하여 작동시킬 수있었습니다. 이를 개선하는 방법에 대한 모든 제안을 환영합니다.
나는 별도의 파일이 있습니다. 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] 삭제
몇 마디 만하겠습니다