ReactJS 和自动对焦

Question

我有一个带有

react-bootstrap

的

<input>

模态。我想在

<input>

上设置自动对焦属性

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

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

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

以下选项不起作用，因为它们在打开模式时不会聚焦输入：

<input type="text" autoFocus='true' />
<input type="text" autoFocus={true} />
<input type="text" autoFocus />

建议的自动对焦设置方式是什么？或者我应该如何使效果良好的示例的警告静音？

注意：这是react 16.8.6

Answer 1

如果您使用 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

。

Answer 2

Refs

就是你想要的，

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

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

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

Answer 3

如果您正在使用反应钩子，您可以编写自己的简单自动聚焦钩子：

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")

以您的形式。

Answer 4

为什么我开始输入时会出现错误？但如果没有自动对焦或其替代方案，我的代码就可以了。