反应中的电话号码屏蔽

Question

React js 项目中的input-mask。 我的代码如下所示。

<InputMask mask="[phone]" maskChar=" ">
{() => (
<TextField
defaultValue="2223334444"
helperText="ex) 2134445555"
label="Phone Number"
color="secondary"
className={classes.textField}
inputProps={{
onChange: (e) => {
if (validateLength(churchPhonenumber, 5, 15)) {
setChurchPhonenumberState("success");
} else {
setChurchPhonenumberState("error");
}
setChurchPhonenumber(e.target.value);
},
}}
/>
)}
</InputMask>

它显示一个文本字段，但我无法输入！ 并且也不显示默认值。

Answer 1

用于电话号码屏蔽的电话号码输入。

import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
function Example() {
const [value, setValue] = useState()
return (
<PhoneInput
placeholder="Enter phone number"
value={value}
onChange={setValue}/>
)
}

请查看源代码和演示