Блог

Главная - Вопросы по программированию - Требуется много времени, чтобы ввести в текстовые поля в стиле M-UI, когда я вызываю onChange, собирая данные поля ввода в react

Требуется много времени, чтобы ввести в текстовые поля в стиле M-UI, когда я вызываю onChange, собирая данные поля ввода в react

#javascript #reactjs #material-ui #babeljs

#javascript #reactjs #материал-пользовательский интерфейс #babeljs

Вопрос:

Итак, моя проблема в том, что при вводе в текстовые поля требуется около 2 секунд, чтобы написать символ и вывести его в консоль, я попытался использовать React.memo и useCallback, но это не удается:/ Вот мой код:

 const [userData, setUserData] = useState([]);
 const handleDataChange = (e) => {
    const {name, value} = e.target;
    setUserData({
      [name]: value
    })
  }
  console.log(userData);
  <div className="user__infoRow">
            <TextField variant="filled" type="text" label="First Name" name="fname" onChange={handleDataChange} />
            <TextField variant="filled" type="text" label="Last Name" name="lname" onChange={handleDataChange} />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="email" label="email" name="email" onChange={handleDataChange} />
            <TextField variant="filled" type="text" label="Phone number" name="phone" onChange={handleDataChange} />
          </div>

P.S это мой первый пост, извините, если я сделал это неправильно

Комментарии:

1. Код отображается нормально ( хотя вы не должны входить в тело функционального компонента ) и работает здесь, в этой изолированной среде, после исправления вашей функции обновления состояния. Что еще делает этот компонент? Можете ли вы воспроизвести свою проблему в работающем codesandbox?

2. Хорошо, я нашел способ добиться того же результата, спасибо, что обратили внимание на мой вопрос!

Ответ №1:

Итак, я нашел способ добиться того же результата. Я обернул входные данные в форму и настроил ее на запуск функции onSubmit и нацеливание на поля, которые я только что использовал e.target.elements.name.value Вот код :

  const handleDataChange = (e) => {
    e.preventDefault();
    setUserData({
      ["fName"] : e.target.elements.fname.value,
      ["lName"] : e.target.elements.lname.value,
      ["email"] : e.target.elements.email.value,
      ["phone"] : e.target.elements.phone.value,
    })
  }
  
  <form className="user__info" onSubmit={handleDataChange}>
 <div className="user__infoRow">
            <TextField variant="filled" type="text" label="First Name" name="fname" />
            <TextField variant="filled" type="text" label="Last Name" name="lname" />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="email" label="email" name="email" />
            <TextField variant="filled" type="text" label="Phone number" name="phone" />
          </div>
</form>