Reactjs Reactstrap innerRef未设置对元素的引用

我尝试使用Reactstrap 8.5.1 innerRef属性和useRef（）来在模态打开时集中模态内的输入。下面的代码显示了打开模式的按钮，但单击时出现错误“无法读取null的属性'focus'。它还将inputRef写入控制台，这表明.current为null

我尝试了各种方法来设置innerRef，但似乎没有任何效果。如果有人能指出我缺少什么，我将非常感激

import React, { useState, useRef, useEffect } from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Input } from 'reactstrap';


export const ModalSave = (props) => {
    const [modalIsOpen, setModalIsOpen] = useState(false);
    const toggle = () => setModalIsOpen(!modalIsOpen);

    const inputRef = useRef(null);

    useEffect(() => {
        console.log(inputRef);
        if (modalIsOpen === true) {
            inputRef.current.focus();
        }
    }, [modalIsOpen]);

    return (
        <div>
            <Button
                onClick={() => { setModalIsOpen(true); }}
            >Save</Button>
            <Modal isOpen={modalIsOpen} toggle={toggle}>
                <ModalHeader toggle={toggle}>Save</ModalHeader>
                <ModalBody>
                    Name:
                    <Input
                        innerRef={inputRef.current}
                    />
                </ModalBody>
                <ModalFooter>
                    <Button>Save</Button>
                    <Button onClick={toggle}>Close</Button>
                </ModalFooter>
            </Modal>
        </div>
    );
}

import React，{useState，useRef，useffect}来自'React'；
从“reactstrap”导入{Modal，ModalHeader，ModalBody，ModalFooter，Button，Input}；
导出常量ModalSave=（道具）=>{
const[modalIsOpen，setModalIsOpen]=使用状态（false）；
常量切换=（）=>setModalIsOpen（！modalIsOpen）；
const inputRef=useRef（null）；
useffect（（）=>{
控制台日志（inputRef）；
如果（modalIsOpen==真）{
inputRef.current.focus（）；
}
}，[modalIsOpen]）；
返回(
{setModalIsOpen（true）；}
>拯救
拯救
姓名：
拯救
接近
);
}

问题在于，打开模式不会触发组件重新渲染，这是获取输入值所需的

ref

值，因此

ref

将保持

null

，除非调用某些状态来触发重新渲染。作为一种解决方法，您可以使用

setTimeout（）

方法强制执行以下操作：

useEffect(() => {
  if (modalIsOpen) {
   setTimeout(() => inputRef.current.focus(), 0);
  }
}, [modalIsOpen]);

更好的解决方案是使用打开的方法，该方法在模态打开后调用：

export default function App() {
  const inputRef = useRef(null);
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const toggle = () => setModalIsOpen(!modalIsOpen);
  const handleOpen = () => inputRef.current.focus();

  return (
    <div className="App">
      <div>
        <Button onClick={() => setModalIsOpen(true)}>Save</Button>
        <Modal isOpen={modalIsOpen} toggle={toggle} onOpened={handleOpen}>
          <ModalHeader toggle={toggle}>Save</ModalHeader>
          <ModalBody>
            Name:
            <Input innerRef={inputRef} />
          </ModalBody>
          <ModalFooter>
            <Button>Save</Button>
            <Button onClick={toggle}>Close</Button>
          </ModalFooter>
        </Modal>
      </div>
    </div>
  );
}

导出默认函数App（）{
const inputRef=useRef（null）；
const[modalIsOpen，setModalIsOpen]=使用状态（false）；
常量切换=（）=>setModalIsOpen（！modalIsOpen）；
const handleOpen=（）=>inputRef.current.focus（）；
返回(
setModalIsOpen（true）}>保存
拯救
姓名：
拯救
接近
);
}

---

谢谢你的回答！你是对的，更好的解决方案是使用onOpened。我已经改变了我的代码来使用它，现在它可以工作了。