ReactJS和自动对焦

时间:2019-07-05 03:27:12

标签: javascript reactjs bootstrap-modal react-bootstrap autofocus

我有一个react-bootstrap的{​​{1}}模态。我想在<input>

上设置自动对焦属性

以下工作正常,但在控制台中显示警告

<input>
<input type="text" autofocus='true' />

以下选项不起作用,因为它们在打开模式时不会集中输入内容:

Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?

设置自动对焦的推荐方法是什么。还是我应该忽略效果良好的示例的警告?

注意:这是反应16.8.6

3 个答案:

答案 0 :(得分:3)

如果您使用的是React Hooks,请将useCallback()添加到组件中,并将ref={callback}添加到表单控件中:

import React, { useCallback } from 'react'

function InputComponent() {
    const autoFocus = useCallback(el => el ? el.focus() : null, [])

    return <input type="text" ref={autoFocus} />
}

export default InputComponent

您也可以将<input>替换为React Bootstrap FormControl

答案 1 :(得分:0)

Refs是您想要的,

constructor(props) {
    super(props);
    this.myRef = React.createRef();
}

componentDidMount(){
  this.myRef.current.focus();
}

<input type="text"  ref={this.myRef} />

答案 2 :(得分:0)

如果您使用反应挂钩,则可以编写自己的简单自动对焦挂钩:

import { useEffect, useState } from "react";

export const useAutoFocus = (inputId: string) => {
    const [initialized, setInitialized] = useState(false);
    useEffect(() => {
        if(!initialized) {
            document.getElementById("email").focus();
            setInitialized(true);
        }
    });
};

和简单的用法,例如

useAutoFocus("email")

以您的形式。