React输入表单故障：输入时光标自动消失问题求助

核心原因 #

你遇到的光标消失问题，本质是每次调用setHead触发组件重渲染时，input元素被React重新创建，导致浏览器丢失光标焦点。最常见的触发场景是input未绑定状态值，变成半受控组件，状态更新后React的DOM diff逻辑混乱，进而重建input元素。

解决方案 #

1. 将input改为受控组件（最可能解决问题） #

给input添加value={head}属性，让输入值完全和head状态绑定，确保状态与输入框内容同步：

<form className="padd title-form">
  <input 
    type="text" 
    className="title-textbox textbox-defaults" 
    placeholder="Title"
    value={head}  {/* 新增绑定状态值 */}
    onChange={(e) => { setHead(e.target.value) }} 
  />
</form>

你之前的代码只在onChange里更新状态，但没把状态回传给input，属于半受控组件，这种情况会导致React无法正确追踪输入框的状态，重渲染时会重新生成input元素，光标自然丢失。

2. 排查组件挂载/卸载逻辑 #

如果上述方法无效，检查input所在的组件是否被包裹在条件渲染语句中（比如{someState && <InputComponent />}）。若someState会随head变化而改变，会导致组件反复卸载重挂载，重建input元素。

• 解决：调整条件渲染逻辑，确保input所在组件不会被频繁卸载；或给组件添加稳定的key属性（比如固定字符串），让React识别这是同一个组件实例。

3. 检查父组件的key属性 #

如果input的父组件使用了动态变化的key（比如用Math.random()或每次渲染都会改变的值），每次重渲染时key变化会触发React销毁并重建父组件及内部的input。

• 解决：给父组件设置固定不变的key值。

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