Не работает onChange в двустрочном приложении

Question

Не работает onChange в двустрочном приложении

Рейтинг: 1Ответов: 1Опубликовано: 06.08.2023

onChange не меняет значение в

элементе и не очень ясно почему, есть идеи?

import { useRef } from 'react';
import './App.css';

function App() {
  const inputRef = useRef('');
  
  const handleChange = (event) => {
    inputRef.current = event.target.value;
  };
  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>Значение формы: {inputRef.current}</p>
    </div>
  );
}

export default App;

reactjs react-hook

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Как правильно подсказал @Oliver_Patterson, c ref нет перерисовки. При изменении значения в <input> вы обновляете значение переменной inputRef.current, но это не вызывает перерисовку компонента, значение в параграфе не обновляется.

А вот с useState всё тип-топ.

<html>
<head>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;

    function App() {
      const [inputValue, setInputValue] = useState('');

      const handleChange = (event) => {
        setInputValue(event.target.value);
      };

      return (
        <div>
          <input type="text" onChange={handleChange} />
          <p>Значение формы: {inputValue}</p>
        </div>
      );
    }

    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

Используем useState для создания состояния inputValue, которое будет хранить текущее значение <input>. При вводе текста в <input>, функция handleChange вызывается и обновляет состояние inputValue, происходит перерисовка и значение обновляется.

Не работает onChange в двустрочном приложении

Ответы