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

【问题标题】：autoFocus on input when opening modal does not work - React Bootstrap打开模式时自动聚焦输入不起作用 - React Bootstrap
【发布时间】：2019-11-13 03:58:07
【问题描述】：

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

不知道为什么第一个没有它，当我初始化模式时，我看到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}，但问题仍然存在。

【问题讨论】：

Modal 组件应该是 autoFocus={false} 而不是 autoFocus="false"。
我试过了，问题依旧
你能用代码沙箱之类的一些可行的代码来复制这个问题吗？这样我们就可以更轻松地帮助您解决问题。

标签： javascript reactjs react-bootstrap

【解决方案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} />;
};

【讨论】：

使用打字稿时，将innerRef声明为： const innerRef = useRef()

【解决方案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

【讨论】：

这行得通，但还有一个问题，为什么我们需要setTimeOut？
我猜 Bootstrap 模态显示动画有一些过渡时间。也许input 元素尚未安装。因此，只需添加一个小窗口即可解决问题。
哦，我明白了，因为这个原因，我整天都在用头撞墙。非常感谢您的意见！

【解决方案3】：

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

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

【讨论】：

在 0.33.x 停止工作

【解决方案4】：

您可以使用 onShow 回调（将在动画结束后调用）将焦点设置到内部字段。

import React, {useRef} from 'react';
    
const MyForm = () => {
    const innerRef = useRef();

    return (
       <Modal onShow={() => {innerRef.current.focus()}}>
           <Form.Control ref={innerRef} />
       </Modal>
   )
}

【讨论】：

【解决方案5】：

只需在模态上添加 autoFocus = {false}，在输入上添加 autoFocus = {true}。

<Modal autoFocus={false}>
  <Form>
    <ModalHeader>Type Your Input</ModalHeader>
    <ModalBody>
      <Input autoFocus={true} />
      <Button>Submit</Button>
    </ModalBody>
  </Form>
</Modal>

参考：https://simplernerd.com/js-reactstrap-modal-autofocus/

【讨论】：

【解决方案6】：

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

【讨论】：