2

您好，我是 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)}
    />
  );
}

感谢您的预期帮助。

4

1 回答 1

1

updatePhoneNumber function only updates value if phone number is valid so when the user is still typing it won't let you do any changes.

You can set error if phone number is invalid and replace text with newPhoneNumber.number otherwise

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>

于 2020-06-01T12:13:25.433 回答