如何在React Hooks中的父组件中单击按钮时设置对子组件输入的焦点

const [inputFocus, setInputFocus] = useState(false);

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

const handleClick = () => {
  setInputFocus(true);
}

<button onClick={handleClick}>设置焦点</button>

import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [inputFocus, setInputFocus] = useState(false);

  const handleClick = () => {
    setInputFocus(true);
  }

  return (
    <div>
      <button onClick={handleClick}>设置焦点</button>
      <ChildComponent inputFocus={inputFocus} />
    </div>
  );
};

export default ParentComponent;

import React, { useEffect, useRef } from "react";

const ChildComponent = ({ inputFocus }) => {
  const inputRef = useRef(null);

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

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

export default ChildComponent;