Блог

Я пишу редактор, в котором я хотел бы получать уведомления о любых изменениях в документе. Итак, я создал дерево компонентов, в котором каждый узел отчитывается перед родителем через onChange(..) обратный вызов:

 // Pseudo structure.
Root {
    const [changed, setChanged] = useState(true)
    function onChange(..) {
      setChanged(true);
    }

    return (
        <App>
          <Status saved={!changed} />
          <Editor onChange={onChange}>
            <Text onChange={onChange} />
            <Image onChange={onChange} />
          </Editor>
        </App>
    );
}
  

Теперь мне нужно создать <Table> компонент, в котором каждая ячейка является редактируемым вводом
, который запускает onChange обратный вызов. Из-за useState in Root каждый
раз, когда мы меняем одну букву в таблице, отображается вся структура.

Но рендеринг приводит к потере фокуса, что, по общему признанию, раздражает при вводе текста. Мое текущее решение — сохранить текущую ячейку через useMemo в моем новом Table компоненте и запросить фокус при визуализации компонента. Тем не менее, я все еще теряю позицию курсора, и у меня такое чувство, что это хакерский способ работы (вот почему я обращаюсь к вам).

Как я могу уведомить об изменении и обновить состояние my Root , не теряя фокуса с одного ввода?

Спасибо

Мое предложение

1. Сохранять компоненты без состояния как дочерние.
2. Используйте ключи для каждой ячейки, чтобы избежать ненужной повторной отправки от родительского элемента.