React中修改CSS同时设置Input焦点失效原因咨询

为什么第一种写法无效？ #

React的状态更新是异步批量处理的，调用setInputDisplay("block")后，React不会立刻修改DOM，而是把状态更新加入队列，等当前事件循环结束后才会重新渲染组件、更新DOM。

在你的HandleShowInput函数里，执行顺序是：

1. 调用setInputDisplay("block")，标记状态需要更新，但此时DOM还没变化，父组件Box的display还是none
2. 立刻调用refInput.current.focus()，但此时Input元素仍然处于隐藏状态（父元素display:none），浏览器无法给隐藏的元素设置焦点，所以这行代码无效。

为什么第二种写法有效？ #

useEffect的执行时机是组件渲染完成、DOM更新之后，并且当依赖数组[inputDisplay]中的值发生变化时才会触发。

流程是：

1. 点击按钮调用setInputDisplay("block")，状态标记为更新
2. React完成组件重新渲染，更新DOM，此时Box的display变为block，Input元素变为可见
3. 因为inputDisplay状态变化，触发useEffect回调，此时调用refInput.current.focus()，Input已经可见，浏览器可以正常设置焦点。

补充样式优化说明 #

你的StBox初始样式逻辑有遗漏：当theme为"none"时，switch的default分支没有返回样式，导致初始状态下父组件不会默认隐藏。建议补充默认分支的样式，保证逻辑一致性：

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

内容的提问来源于stack exchange，提问作者vaseline