HTML-элемент автоматически устанавливает автофокус в React

Question

У меня есть два родственных компонента.

один компонент содержит текстовое поле, флажок, раскрывающиеся элементы управления в нем.

другой компонент содержит Kendo Grid.

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

Используемый подход:

1.Я не хочу использовать ref, так как у меня есть несколько элементов управления в одном компоненте.

2.У меня динамически добавлен атрибут автофокуса для элемента ввода.

Answer 1

Отказ от ответственности: Я не уверен, что эти решения являются лучшими практиками в React

Для этого есть 2 подхода, оба с использованием refs, но с более разумными реализациями:

• Создайте обертку вокруг входов и присвойте ей refs. Всякий раз, когда вы хотите сфокусироваться на входе, просто используйте wrapperRef.querySelector('[name=yourInput]). Рабочий пример: https://codesandbox.io/s/195kkrpvq
• Создать объект, в котором имена полей хранятся в виде ключей, а их ссылки - в качестве значений. Просто используйте this.yourRefsObject[yourInputName].focus(), чтобы сфокусироваться на входе. Рабочий пример: https://codesandbox.io/s/61jl7q9v43

Опять же, я не уверен, являются ли эти реализации лучшими практиками, но они должны сделать эту работу сейчас