React Hooks中onChange状态更新异常及输入框图标切换问题求助

你的问题出在两个关键的状态同步错误上：

1. onChange里用旧状态判断：React的状态更新是异步的，你在onChange里直接用userInput.length判断时，这个值还是输入前的旧状态，而且你根本没在onChange里更新userInput，直接导致状态判断完全错位。
2. 清空输入后未同步图标状态：点击X调用clearText时，只重置了userInput，但没有更新图标显示状态，且清空操作不会触发输入框的onChange事件，所以图标会停留在之前的显示状态。

最优解决方案：去掉单独的图标状态，直接基于userInput渲染 #

不需要维护displayIcons这个额外状态，直接在渲染阶段根据userInput的长度动态计算类名，从根源避免状态不同步问题：

const [userInput, setUserInput] = useState("");

const onChange = (e: any) => {
  // 先更新输入状态
  setUserInput(e.target.value);
};

const clearText = () => {
  setUserInput("");
};

return (
  <div>
    <input value={userInput} onChange={onChange} />
    <label id="default" className={userInput.length === 0 ? "d-block" : "d-none"}>
      %
    </label>
    <label 
      className={userInput.length > 0 ? "d-block" : "d-none"} 
      onClick={clearText}
    >
      X
    </label>
  </div>
);

若需保留displayIcons状态的修正方案 #

如果一定要单独维护图标显示状态，需确保状态更新逻辑完全同步：

const [userInput, setUserInput] = useState("");
const [displayIcons, setDisplayIcon] = useState({ default: "d-block", clear: "d-none" });

const onChange = (e: any) => {
  const newValue = e.target.value;
  setUserInput(newValue);
  // 用最新的输入值判断，而非旧的userInput状态
  if (newValue.length > 0) {
    setDisplayIcon({ default: "d-none", clear: "d-block" });
  } else {
    setDisplayIcon({ default: "d-block", clear: "d-none" });
  }
};

const clearText = () => {
  setUserInput("");
  // 清空后同步更新图标状态
  setDisplayIcon({ default: "d-block", clear: "d-none" });
};

return (
  <div>
    <input value={userInput} onChange={onChange} />
    <label id="default" className={`${displayIcons.default}`}>
      %
    </label>
    <label className={`${displayIcons.clear}`} onClick={clearText}>
      X
    </label>
  </div>
);

核心思路：尽量避免维护多个关联状态，能通过现有状态计算出来的内容，直接在渲染时计算，永远不会出现状态不同步的问题。

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