#javascript #reactjs #semantic-ui-react
Вопрос:
Я пытаюсь автофокусировать ввод, который находится в раскрывающемся списке «Реакция семантического пользовательского интерфейса», с помощью ссылки, но по какой-то причине это не работает. Также ввод должен быть автоматически сфокусирован при открытии раскрывающегося списка. Вот ссылка на песочницу кода. Большое вам спасибо https://codesandbox.io/s/semantic-ui-example-forked-5wrlp?file=/example.js
Комментарии:
1. На основе документа semantic-ui: react.semantic-ui.com/modules/dropdown/#types-search-in-menu .
Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.2. Так что, я полагаю, это невозможно?
3. Кажется, что это невозможно!
4. @MajidM. это возможно.
Ответ №1:
Это возможно без использования ссылок. Обратите внимание, что SUIR имеет компонент Ref, но в этом случае Ref все равно не получит внутренний тег ввода, он получит div обертывания.
Вы можете использовать autoFocus упорку на входе, чтобы сделать фокус ввода при визуализации. Обратите внимание, что это будет работать только в том случае, если вы запретите отображение содержимого раскрывающегося списка, когда оно не открыто. В противном случае ввод будет сфокусирован, как только он отобразится, даже если выпадающее меню не было сфокусировано.
Я обновил вашу кодовую строку примером такой работы. Еще одна вещь, которую следует отметить, это то, что вам, вероятно, потребуется использовать шаблон управляемого компонента, чтобы условно отобразить выпадающее меню, если компонент не открыт, а это означает, что вы сами добавляете все другие функции открытия/закрытия с помощью соответствующих обработчиков.
https://codesandbox.io/s/semantic-ui-example-autofocus-input-in-dropdown-wxxd1