我有一个react-bootstrap
的{{1}}模态。我想在<input>
以下工作正常,但在控制台中显示警告
<input>
<input type="text" autofocus='true' />
以下选项不起作用,因为它们在打开模式时不会集中输入内容:
Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?
设置自动对焦的推荐方法是什么。还是我应该忽略效果良好的示例的警告?
注意:这是反应16.8.6
答案 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")
以您的形式。