Question

单击模态按钮时，我正在使用react-bootstrap并导入组件模态，模态弹出，但是我希望焦点是在单击打开模态按钮时直接转到模态内部的输入字段，我无法实现

我尝试将属性设置为autoFocus，还尝试使用refs，但到目前为止没有成功。

子组件

 <Modal

    aria-labelledby="contained-modal-title-vcenter"
    centered
  >

    <Modal.Body>
      <h4>File Name</h4>
      <input autoFocus aria-label="File name entering field"  className="form-control mt-3" name="term" type="text"  />
    </Modal.Body>

  </Modal>

触发孩子的父母

 <Button 
          variant="dark"
          onClick={() => {this.setState({ modalShow: true }); } }
        >
        popper
        </Button>

        <MyVerticallyCenteredModal
          show={this.state.modalShow}
          onHide={modalClose}
          saver= {this.saveDataImage}
        />

我希望焦点直接进入模式中的输入字段以具有良好的可访问性

Answer 1

您可以使用useRef，如此处所述：useRef docs

Answer 2

在要聚焦的INPUT组件中，应添加属性“ autoFocus” 例如：

<input autoFocus id=... name=.../>

有关更多信息，请检查： Set focus on input after render

Answer 3

我们可以为input元素创建一个ref，并且在安装了input元素的组件安装后，我们可以使用componentDidMount生命周期挂钩来集中输入

class Input extends React.Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
  }

  componentDidMount = () => {
    this.inputRef.current.focus();
  };

  render() {
    return <input ref={this.inputRef} type="text" />;
  }
}

如何在单击按钮时专注于子元素组件？

3 个答案: