Question

我有一个包含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"，但问题仍然存在。

Answer 1

这是与@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} />;
};

Answer 2

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

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

Answer 3

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

正确设置了该值

Answer 4

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

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

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

4 个答案: