React> Как установить фокус на поле ввода после добавления новой строки с использованием таблицы реакции - PullRequest
Новая
       43

React> Как установить фокус на поле ввода после добавления новой строки с использованием таблицы реакции

2 голосов
/ 19 февраля 2020

Я решил использовать react-table для построения сетки.

Еще одна вещь, чтобы улучшить интерфейс, то есть я хочу сосредоточиться на поле ввода нового элемента после нажатия на кнопку добавления нового .

Я собираюсь использовать ref, но понятия не имею, как fowardRef для дочернего элемента

Вот мой пример использования таблицы реакции:

https://codesandbox.io/s/beautiful-proskuriakova-lpfxn

В этом случае я хочу сфокусироваться на поле First Name после добавления новой строки.

enter image description here

ОБНОВЛЕНО: Я могу сфокусироваться на вводе, используя autoFocus поддержку родного HTML.

Ответ здесь

Но я все еще хочу обработать фокус с помощью React Ref

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Я использовал обычный JavaScript для достижения вашей цели 

  const setFocus = () => {
    //Add id to the table
    document.getElementsByTagName("TABLE")[0].setAttribute("id", "mytable");

    //table > tbody > tr (latest added row) > td (first cell in the row) > input
    let cell = document.getElementById("mytable").lastElementChild
      .lastElementChild.firstElementChild.children[0];

    cell.focus();
  };

  const addNew = () => {
    setData(old => [...old, {}]);
    window.requestAnimationFrame(setFocus);
  };

Edit Editable with react-table

Я использовал requestAnimationFrame, потому что манипулировал DOM, Checkout это ответ для более подробной информации.

1 голос
/ 19 февраля 2020

Вы пытаетесь применить forwardRef() к функциональному компоненту, и React do c говорит

Вы не можете использовать атрибут ref для компонентов функции React ref do c

Вы можете использовать useImeprativeHandle(), который может быть; 

const Table = React.forwardRef((props, ref) => {
  const inputRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }), []);
  return <Editable ref={inputRef} {...props} />;
}

Теперь вы можете достичь ref с созданием ref и вызвать метод императива. Я не смотрел, как сфокусировать ваш элемент, но вы можете справиться с проблемой forwardRef, используя imperativeHandle.

ИЛИ

Вы можете преобразовать свой компонент EditTable в классифицированную композицию.

...