我想从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} /> ); };
3 回答
蛊毒传说
TA贡献1895条经验 获得超3个赞
所以我能够使用以下方法让它工作。任何有关如何改进这一点的建议都非常受欢迎。
我有一个单独的文件，名为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条经验 获得超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条经验 获得超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 关注
- 67 浏览
添加回答
举报
0/150
提交
取消