React中的电话号码掩码

Question

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

                  <InputMask mask="(999)999-9999" 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

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

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}/>
  )
}

请检查Source和Demo