反应 | 模态输入字段自动对焦

Question

我正在为我的项目使用React和ant design。

我有一个 Popover，它有一个按钮。当用户单击按钮时它显示带有输入字段的模式

问题

当我单击 Show Modal Button 时，自动对焦不起作用，并且弹出框也没有隐藏

我试过 HTML5 autoFocus

<textarea autoFocus></textarea>

但它没有用。我有关于stackblitz 的完整代码

Answer 1

将autoFocus={false}添加到您的模态以拒绝模态的焦点管理。

<Modal ... autoFocus={false}>

<textarea autoFocus={true}>

Answer 2

对我有用的是在模式完成转换后设置输入的焦点。

使用useRef钩子，我的代码就像

...
<Modal ... onEntered={() => textarea.current.focus()} >
    <textarea  ... ref={textarea} />
</Modal>

链接到ModalAPI https://react-bootstrap.github.io/components/modal/#modal-props

Answer 3

当您显示模态时，您可以使用ref来textarea手动设置焦点。

 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，您可以使用visibleprop ofPopOver并相应地设置状态。

 showPopOver = () => {
    this.setState({
      popOverVisible: true
    })
 }
 ...
 <Popover ...
   visible={this.state.popOverVisible}>
   <span type="primary" onClick={this.showPopOver}>Click me (Popover Button)</span>
 </Popover>

希望这可以帮助。

工作演示

对于多个 PopOver：演示