我试着做...第一次渲染时屏幕上没有输入。当我点击按钮时，输入出现了。我想同时在输入上设置焦点。
让我来解释一下我做了什么。起初，输入在屏幕上是不可见的。因为Box的display属性（div标签），这是input的父组件，是none。但是当我点击按钮时，这个框的display属性变成了block。这是我要做的。我要把焦点放在屏幕上的输入上。在按钮被点击时调用的函数中，我写了一段代码来改变css代码并将焦点设置在输入上，但是它没有起作用，请看下面的代码。

const [inputDisplay, setInputDisplay] = useState("none");
const refInput = useRef(null);

const HandleShowInput = () => {
  setInputDisplay("block");
  refInput.current.focus();
};

return (
  <>
    <Box theme={inputDisplay}>
      <Input ref={refInput}/>
    <Box/>
    <Button onClick={HandleShowInput}/>
  </>
)

下面是动态更改Box组件的css的代码。

import styled, { css } from "styled-components";

const Box = ({ children, ...props }) => {
    return <StBox {...props}>{children}</StBox>;
};

const StBox = styled.div`
  ${({ theme }) => {
    switch (theme) {
      case "block":
        return css`
          display: ${theme} !important;
        `;
      default:
        break;
    }
  }}
`;

export default Box;

但是下面的代码是工作的。我把它放在useEffect中来分离代码。

const [inputDisplay, setInputDisplay] = useState("none");
const refInput = useRef(null);

const HandleShowInput = () => {
  setInputDisplay("block");
};

useEffect(() => {
    refInput.current.focus();
}, [inputDisplay]);

return (
  <>
    <Box theme={inputDisplay}>
      <Input ref={refInput}/>
    <Box/>
    <Button onClick={HandleShowInput}/>
  </>
)

我想知道为什么大写字母不起作用，小写字母起作用。我不知道我是否缺乏react知识或css知识。我将非常感激，如果你能帮助一个初学者在react。此外，请理解，如果有任何不自然的句子，因为我不擅长英语。谢谢。