我想從react-phone-number-input 向PhoneInput 組件提供一個材質(zhì)UI TextField 組件作為道具inputComponent。但是，我似乎無法成功應(yīng)用參考。盡管我看到 Material UI TextField 組件渲染到 UI 并且狀態(tài)已成功使用該值進行更新，但在鍵入第一個值后，它仍然會失去焦點。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} /> ); };
3 回答
蠱毒傳說
TA貢獻1895條經(jīng)驗 獲得超3個贊
所以我能夠使用以下方法讓它工作。任何有關(guān)如何改進這一點的建議都非常受歡迎。
我有一個單獨的文件，名為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}
/>
...
12345678_0001
TA貢獻1802條經(jīng)驗 獲得超5個贊
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} />
}
動漫人物
TA貢獻1815條經(jīng)驗 獲得超10個贊
這是我使用 MUI v5 的組件：
表單字段
//...
const [phone, setPhone]: any = useState();
const handlePhone = (e: ChangeEvent<HTMLInputElement> )=>{
setPhone(e.target.value)
}
<TextField onChange={handlePhone} value={phone} variant="outlined"
sx={{ '& .MuiOutlinedInput-input': {display: 'flex'}}}
InputProps={{
inputComponent: PhoneField as any,
inputProps: {
name: "phone",
control: control,
international: true,
defaultCountry: "US",
value: phone,
}/>
電話字段
interface PhoneNumberProps {
value?: string;
placeholder?: string;
onChange: (event: { target: { value: string } }) => void;
name: string;
}
export const PhoneField = forwardRef<HTMLElement, PhoneNumberProps>((props, ref:any) => {
const { onChange, name, placeholder, value, ...other } = props;
return <PhoneInputWithCountry name={name} ref={ref} placeholder="1 213 123 4567" onChange={(value: string)=>onChange({target:{value}})} {...other}/>
})
- 3 回答
- 0 關(guān)注
- 180 瀏覽
添加回答
舉報
0/150
提交
取消