打开模式时自动聚焦输入不起作用 - React Bootstrap

Question

我有一个包含 3 个组件的模态。每个组件代表一个阶段，例如第一个组件是在用户点击next时输入用户的名字，然后它会转到下一个组件，即输入地址然后用户点击next，它会将用户带到最后一步，输入昵称。在input组件中的每个元素上，它都有一个autoFocus. 到目前为止，在最后两个组件中，inputs除了第一个组件之外，还有一个 autoFocus。

不知道为什么第一个没有它，当我初始化模态时，我看到input没有autoFocus，然后我点击下一步然后第二个组件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"到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

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

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