在 reactjs 的输入字段中格式化和设置电话号码

Question

你好，我是reactjs的初学者。

我目前的用例非常简单，我有一个输入字段，用于接受电话号码并在用户键入时对其进行格式化。不幸的是，事实证明，当我开始格式化时，输入字段冻结并拒绝接受进一步的输入

这是我的代码

import { parsePhoneNumberFromString } from 'libphonenumber-js';
export default function UpdatePhoneDetails() {
const [phoneNumber, setPhoneNumber] = useState('');
const updatePhoneNumber = (value) => {
const newPhoneNumber = parsePhoneNumberFromString(value, 'NG');
if (newPhoneNumber) {
const formattedNumber = newPhoneNumber.number;
const valid = newPhoneNumber.isValid();
if (valid) {
setPhoneNumber(formattedNumber); //The input field seems to be freezing here
}
}
};
return (
<TextField
variant="outlined"
required
fullWidth
id="phonenumber"
label="Phone Number"
name="phonenumber"
autoFocus
value={phoneNumber}
defaultValue={phoneNumber}
disabled={updating}
autoComplete="phonenumber"
onChange={(event) => updatePhoneNumber(event.target.value)}
/>
);
}

感谢您预期的帮助。

Answer 1

updatePhoneNumber函数仅在电话号码有效时更新值，因此当用户仍在键入时，它不会允许您进行任何更改。

如果电话号码无效，您可以设置错误，否则将文本替换为newPhoneNumber.number

const { TextField } = window.MaterialUI;
const { useState, useEffect } = React;
const { parsePhoneNumberFromString } = libphonenumber;
//console.log(Object.keys(libphonenumber));
const App = () => {
const [text, setText] = useState('');
const [error, setError] = useState(null);
const onChange = ({target: {value}}) => {
let valid = true;
const newPhoneNumber = parsePhoneNumberFromString(value, "NG");

if (newPhoneNumber) {
valid = newPhoneNumber.isValid(); 

if(valid) {
value = newPhoneNumber.number;
}
}

setError(!valid);
setText(value);
}
return <div>
<TextField
variant="outlined" 
required
fullWidth
id="phonenumber"
label="Phone Number"
name="phonenumber"
error={!!error}
helperText={error && 'Invalid phone number'}
autoFocus
value={text}
onChange={onChange}>
</TextField>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.7.52/libphonenumber-js.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>