打开模式时输入时自动聚焦-React Bootstrap

时间:2019-11-13 03:58:07

标签: javascript reactjs react-bootstrap

我有一个包含3个成分的模态。每个组件代表一个阶段,例如,当用户单击下一步时,第一个组件正在输入用户的名字,然后它将转到下一个组件,即输入地址,然后用户单击下一步,它将把用户带到最后阶段,输入一个昵称。在组件中的每个input元素上,它将都有一个autoFocus。到目前为止,在最后两个组件中,inputs除第一个组件外具有自动对焦。

不知道为什么第一个没有它,当我初始化模态时,我看到input没有autoFocus,然后我按下了第二个组件{{1} }有了它,然后我回到第一个组件-按下“后退”按钮-然后我看到第一个组件中的input有一个input。很奇怪,我一直在尝试许多方法来解决此问题,从将autoFocus设置为模态,为第一个输入创建一个autoFocus={false},但仍然无法正常工作。

似乎是模态有问题,它在初始化时焦点位于某处而不是ref上。有人遇到过这个问题吗?

(伪)示例代码

input

您的帮助将不胜感激!

注意:

我尝试在模式中将此//Component Hosting the modal render(){ if(this.state.modal_stage === 1){ <FirstName /> }else if(this.state.modal_stage === 2){ <LasgtName /> }else if(this.state.modal_stage === 3){ <NickName /> } return( <Modal dialogClassName="locationModal customModal" show={this.state.modalShow} onHide={this.hideModal} autoFocus="false"> <Modal.Header> <div className="closeModal" onClick={this.hideModal}></div> </Modal.Header> <Modal.Body> { current_stage} </Modal.Body> <Modal.Footer> {backButton} {nextButton} </Modal.Footer> </Modal> ); } //<FirstName /> component constructor(props){ super(props) this.inputRef = React.createRef(); } componentDidMount(){ this.inputRef.current.focus(); } .... render(){ return( <div> <input type="text" placeholder="firstName" ref={this.inputRef}/> </div> ); } 设置为autoFocus="false",但问题仍然存在。

4 个答案:

答案 0 :(得分:4)

这是与@dev_junwen中使用功能组件和挂钩的解决方案相似的解决方案。也无需超时。

import React, { useEffect, useRef } from 'react';

const FirstInput = ({ item, save }) => {
    const innerRef = useRef();
    useEffect(() => innerRef.current && innerRef.current.focus());

    return <input ref={innerRef} />;
};

答案 1 :(得分:1)

找到了可以解决您问题的解决方案。您可以为组件添加一些超时,使其专注于输入。这应该可以解决您的问题。

class FirstInput extends React.Component {
  constructor(props) {
    super(props);
    this.innerRef = React.createRef();
  }

  componentDidMount() {
    // Add a timeout here
    setTimeout(() => {
      this.innerRef.current.focus();
    }, 1)
  }

  render() {
    return <input ref={this.innerRef} />;
  }
}

这是一个有效的示例:https://codesandbox.io/s/react-bootstrap-autofocus-efkve?fontsize=14

答案 2 :(得分:0)

设置autoFocus="false"时似乎正在使用字符串而不是布尔值-应该为autoFocus={false}。这就是为什么它第二次起作用的原因,因为您是通过引用this.inputRef.current.focus();

正确设置了该值

答案 3 :(得分:0)

显然,react-bootstrap 存在一个错误,不允许在 Modal 组件上使用 autoFocus。修复此错误的解决方法是禁用模态组件上的动画。

    <Modal animation={false}>
      <Form.Control autoFocus />
    </Modal>