Реагировать | Автофокус модального поля ввода

Я использую React и ant design для своего проекта.

Там у меня есть Popover и кнопка. когда пользователь нажимает кнопку, отображается модальное окно с полем ввода

Проблема

Когда я нажимаю Показать модальную кнопку, автофокус не работает, а также не скрывается всплывающее окно

Я пробовал использовать HTML5 autoFocus

<textarea autoFocus></textarea>

Но не вышло. У меня есть полный код на stackblitz


reactjs autofocus
person Maria Jeysingh Anbu    schedule 28.02.2018    source источник
comment
Возможно, это может помочь: stackoverflow.com/questions/42853176/   -  person Marko Savic    schedule 28.02.2018
comment
На чем вы пытаетесь сосредоточиться? Я не вижу <textarea /> в вашем коде   -  person Galupuf    schedule 28.02.2018
comment
stackblitz.com/edit/react-beveqs Я обновил ссылку   -  person Maria Jeysingh Anbu    schedule 28.02.2018
comment
@MariaJeysinghAnbu, я добавил ответ. Сообщите, помогло ли это.   -  person Dev    schedule 01.03.2018

Ответы (3)


arrow_upward
2
arrow_downward

Когда вы показываете Modal, вы можете использовать ref вашего textarea, чтобы вручную установить фокус.

 showModal=()=> {
    this.setState({
        visible: true,
        popOverVisible: false
    },()=>{
      setTimeout(()=>{this.testInput && this.testInput.focus()}, 1);
    });
 }

В вашем модальном окне

<Modal ...>
  ...
  <textarea 
   type='text'
   ref={(textarea) => { this.testInput = textarea; }} ></textarea>
  ...
</Modal>

Чтобы скрыть свое всплывающее окно, вы можете использовать visible prop of PopOver и соответствующим образом установить состояние.

 showPopOver = () => {
    this.setState({
      popOverVisible: true
    })
 }
 ...
 <Popover ...
   visible={this.state.popOverVisible}>
   <span type="primary" onClick={this.showPopOver}>Click me (Popover Button)</span>
 </Popover>

Надеюсь это поможет.

Рабочая демонстрация

Для нескольких PopOvers: Демо

person Dev    schedule 28.02.2018
comment
Спасибо @Dev. Не работает, когда есть две кнопки всплывающего окна. в то же время обе кнопки всплывающего окна показывают - person Maria Jeysingh Anbu; 01.03.2018
comment
Сколько Popovers у вас будет? Если вы собираетесь использовать их повторно, я бы посоветовал изменить видимость всплывающих окон, соответствующим образом установив состояние. Позвольте мне обновить ответ - person Dev; 01.03.2018
comment
@MariaJeysinghAnbu, обновил ответ. Надеюсь это поможет - person Dev; 01.03.2018
comment
У меня это сработало, но я не понимаю логики. У вас есть ссылка на документацию по этому атрибуту ref и второму аргументу setState? - person Diego Ortiz; 05.09.2019
comment
у меня это не сработало. Просто пустая трата времени. console.log (this.testInput); // неопределенный - person Sergey Nikolayevich; 23.11.2020

arrow_upward
14
arrow_downward

Добавьте autoFocus = {false} в модальное окно, чтобы отклонить управление фокусом модального окна.

<Modal ... autoFocus={false}>

<textarea autoFocus={true}>
person Rosy Shrestha    schedule 06.12.2018
comment
После открытия модального окна я загружаю в модальный редактор tinymce. Когда любой из модальных окон tinymce открывается поверх модального окна начальной загрузки, ни один из модальных элементов управления вводом tinymce не фокусируется. Пытался установить для autoFocus значение false в модальном режиме, но все равно бесполезно. Любое другое решение - person Ravi MCA; 19.01.2021

arrow_upward
3
arrow_downward

Что сработало для меня, так это установка фокуса ввода после завершения перехода модального окна.

Используя ловушку useRef, мой код был похож на

...
<Modal ... onEntered={() => textarea.current.focus()} >
    <textarea  ... ref={textarea} />
</Modal>

Ссылка на Modal API https://react-bootstrap.netlify.com/components/modal/#modals-props

person bertdida    schedule 05.12.2019
comment
Спасибо! Так просто и так сложно найти! - person Coco; 13.05.2021