React受控Input输入无字符显示，状态切换引发控管转换错误求助

你的handleInput事件处理函数里，错误地将状态更新为当前的showText值，而非输入框的最新输入值，导致状态始终无法更新，输入框绑定的value一直是空字符串，所以输入内容无法显示。

当你把初始值改成null时，React会把输入框视为非受控组件（value为null/undefined时，React默认按非受控模式处理），此时输入框会直接显示用户输入内容，但输入后状态被设为字符串，组件转为受控模式，就会触发“从非受控切换到受控”的警告；删除内容时，因状态更新逻辑错误，无法正确设置为空字符串，导致value又回到null，再次切换模式，同时无法正常删除内容。

修改handleInput函数，将状态同步为输入框的最新值：

const handleInput = (e) => {
  setShowText(e.target.value);
};

这样每次输入时，状态都会同步更新为输入框内容，输入框能正常显示字符，同时保持受控组件的一致性，不会出现模式切换警告。

• 受控组件要求value和onChange必须正确绑定：value对应状态，onChange负责更新状态，两者缺一不可，且更新逻辑要同步输入值。
• 初始值建议用空字符串''，避免出现非受控/受控模式切换的警告，保持组件始终为受控状态。

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