как динамически установить свойство autoFocus в React - PullRequest
Новая
       15

как динамически установить свойство autoFocus в React

0 голосов
/ 11 декабря 2018

У меня есть ModalComponent, который может содержать несколько или нет элементов ввода.Это также может быть просто строка.Также есть SubmitButton.Если есть входные элементы, я хочу установить автофокус на первый элемент.Если нет элементов ввода, я хочу установить autoFocus на SubmitButton. Допустим, у нас есть что-то вроде: 

  render(){
    return (<div>
       {this.props.someSubComponent}
        <button autoFocus={trueIfsomeSubComponentHasNoAutoFocusSet}>Submit</button>
        </div>)
  }

Я попытался найти все реквизиты и потомки (рекурсивно) someSubComponent для поиска реквизита, называемогоautoFocus, который работает только тогда, когда someSubComponent не является функциональным компонентом.В противном случае я не смог бы зацикливаться на подпорках внутри компонента.

До сих пор я видел только два решения:

  1. Я везде устанавливал автофокус вручную, передавая его в качестве опоры
  2. (возможно). Я использую React.forwardRef, чтобы обернуть функциональные компоненты, и использую ссылки, чтобы определить опору автофокуса кнопки

Какие-нибудь другие (лучшие) предложения?:)

...