Хороша ли практика мутирования input элемента в React без useState?

Ссылка скопирована
JavaScript React
1 ответ

Я ради интереса решил сделать компонент, что будет создавать новый Todo без useState

interface Props {     createNewTodo: (title: string) => void }  export default function TodosCreation({createNewTodo}: Props) {     let inputValue: string = '';      function onClickCreateNewTodoButtonHandler(): void {         createNewTodo(inputValue);          document.getElementById('create_input').value = '';     }      return (         <>             <input                 type="text"                 placeholder="Title..."                 id="create_input"                 onChange={event => inputValue = event.target.value}             />             <button onClick={onClickCreateNewTodoButtonHandler}>Create!</button>         </>     ); }

interface Props { createNewTodo: (title: string) => void } export default function TodosCreation({createNewTodo}: Props) { let inputValue: string = ''; function onClickCreateNewTodoButtonHandler(): void { createNewTodo(inputValue); document.getElementById('create_input').value = ''; } return ( <> <input type="text" placeholder="Title..." id="create_input" onChange={event => inputValue = event.target.value} /> <button onClick={onClickCreateNewTodoButtonHandler}>Create!</button> </> ); }

И вот не понятно, хорошо ли так делать? Все гайды как под копирку (совпадение?) при обучении управления состоянием input используют useState, но какая разница? Быть может разница в перерисовывании дерева.

Дополнительно:

получается реакт без реактивности. И зачем он такой нужен?

Получение элементов из DOM через querySelector или getElementBy считается плохой практикой и более идиоматичный для React-а способ - использовать useRef для функциональных / createRef для классовых компонентов.

А сам подход без использования useState называется uncontrolled components и он достаточно часто используется, основное отличие в данном случае будет в том, что изменение значения в инпуте таким образом не вызывает нового рендера и если от этого значения зависят другие компоненты/эффекты, то и они обновляться/вызываться тоже не будут.

  • А сам подход без использования useState называется uncontrolled components и он достаточно часто используется

    Какое отношение пример автора имеет к анконтролед компонентам?

    основное отличие в данном случае будет в том, что изменение значения в инпуте таким образом не вызывает нового рендера

    Основное отличие в том, что при ререндере он вообще потеряет значение.

Ответы:

Именно так писать с точки зрения react некорректно и, вроде, не запуская код, предположу, что не должно работать правильно, потому что onCreate возьмёт старое значение из замыкания.

Либо следует вовсе убрать onChange, можно ведь не синхронизировать переменную и взять input.value в момент создания. Тогда получится классический uncontrolled. Либо же использовать useState.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Андрей PHP Ответ

Мутирование input элемента в React без использования useState не является хорошей практикой, так как это противоречит принципам управления состоянием компонента в React.

При мутировании input элемента напрямую, вы обходите React и его виртуальный DOM, что может привести к непредсказуемым результатам и ошибкам. Кроме того, при таком подходе React не сможет обновить вид компонента в соответствии с изменениями в состоянии.

Вместо этого, следует использовать useState для управления состоянием input элемента. Это позволит React отслеживать изменения в состоянии и обновлять компонент при необходимости. Вот пример, как можно использовать useState для управления значением input элемента в React:

import React, { useState } from 'react';
 
const InputComponent = () => {
  const [inputValue, setInputValue] = useState('');
 
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };
 
  return (
 
  );
};
 
export default InputComponent;

import React, { useState } from 'react'; const InputComponent = () => { const [inputValue, setInputValue] = useState(''); const handleChange = (e) => { setInputValue(e.target.value); }; return ( ); }; export default InputComponent;

Такой подход позволяет сохранить однонаправленный поток данных в React, что делает код более предсказуемым и легким для поддержки. Поэтому рекомендуется использовать useState для управления состоянием input элемента в React.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ 1С-Битрикс Можно ли быстро сделать зеркало сайта на связке Битрикс+Аспро с другими настройками? 1 ответ