Блог

Я пытаюсь следовать инструкциям для material-ui-phone-number для react, используя material ui для react. Далее onChange я вызываю handlePhone функцию, которая сохраняет значение входных данных в состояние. Проблема в том, что на каждом setPhone из них он отключает ввод, как будто он расфокусирует ввод, вам нужно каждый раз нажимать на ввод, чтобы ввести его. Если я удаляю setPhone(value); , внутри он печатается нормально, но тогда я не сохраняю значение и теряю проверку. Есть какие-нибудь идеи?

js:

 const [phone, setPhone] = React.useState("");
const [phoneError, setPhoneError] = React.useState(false);
const handlePhone = (value, countrydata) => {
    setPhoneError(false);
    setPhone(value);
 

HTML:

 <MuiPhoneNumber fullWidth defaultCountry={"es"} variant="outlined" label="Número de teléfono" name="phone" onChange={handlePhone} error={phoneError} helperText={phoneError amp;amp; "Invalid phone"} value={phone} />
 

На данный момент я использую грязное решение для добавления autoFocus параметра, который изменяет логическое значение при изменении

HTML:

 <MuiPhoneNumber key="autofocus_issue_112" defaultCountry="es" fullWidth variant="outlined" label="Número de teléfono" name="phone" value={phone} onChange={handlePhone} error={phoneError} helperText={phoneError amp;amp; "Invalid phone number"} autoFocus={focusPhone} />
 

js:

 const [focusPhone, setFocusPhone] = React.useState(false);
     function handlePhone(value) {
        setFocusPhone(true);
        setPhone(value);
        setPhoneError(false);
      }
 

Но важно добавить, что вам нужно делать setFocusPhone(false); , когда пользователь нажимает на другое поле ввода, иначе MuiPhoneNumber он всегда будет сфокусирован.