我正在使用React 和Ant Design。
我有一个带有按钮的弹出框。当用户单击按钮时，它会显示带有输入字段的模式。
问题
当我单击“显示模式按钮”时，自动对焦不起作用，并且弹出框也没有隐藏
我尝试使用 HTML5 autoFocus
<textarea autoFocus></textarea>
但它不起作用，这里的代码：stackblitz
【问题讨论】：
<textarea />
对我有用的是在模式完成过渡后设置输入的焦点。
使用useRef钩子，我的代码就像
...
<Modal ... onEntered={() => textarea.current.focus()} >
<textarea ... ref={textarea} />
</Modal>
链接到Modal API https://react-bootstrap.github.io/components/modal/#modal-props
【讨论】：
autoFocus 属性应该与 react-bootstrap 一起使用，不幸的是，如果启用了动画，它就不会：github.com/react-bootstrap/react-bootstrap/issues/5102
当你显示Modal时，你可以使用textarea中的ref来手动设置焦点。
showModal=()=> {
this.setState({
visible: true,
popOverVisible: false
},()=>{
setTimeout(()=>{this.testInput && this.testInput.focus()}, 1);
});
}
在您的模态中，
<Modal ...>
...
<textarea
type='text'
ref={(textarea) => { this.testInput = textarea; }} ></textarea>
...
</Modal>
要隐藏你的 Popover，你可以使用 PopOver 的 visible 属性并相应地设置状态。
showPopOver = () => {
this.setState({
popOverVisible: true
})
}
...
<Popover ...
visible={this.state.popOverVisible}>
<span type="primary" onClick={this.showPopOver}>Click me (Popover Button)</span>
</Popover>
希望这会有所帮助。
对于多个 PopOver：Demo
【讨论】：
将 autoFocus={false} 添加到您的模态框以拒绝模态框的焦点管理。
<Modal ... autoFocus={false}>
<textarea autoFocus={true}>
【讨论】：
autofocus 属性与使用useRef 有什么区别吗？因为要使 useRef 在像 React Modal 这样的动态渲染组件中工作，它需要一些工作，而不是使用自动对焦它可以轻松实现所需的结果，提前致谢
只需在模态上添加 autoFocus = {false}，在输入上添加 autoFocus = {true}。
<Modal autoFocus={false}>
<Form>
<ModalHeader>Type Your Input</ModalHeader>
<ModalBody>
<Input autoFocus={true} />
<Button>Submit</Button>
</ModalBody>
</Form>
</Modal>
【讨论】：