javascript - 如何在单击按钮时关注子元素组件？

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>

触发 child 的 parent

 <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