React搜索栏跳转产品页后无法清空输入框问题求助

你的问题核心在于输入框没有和状态做双向绑定，导致调用setText('')后，状态更新了但输入框的显示内容没同步。

具体修改步骤： #

给输入框添加value={text}属性，让输入框成为受控组件，这样状态的变化会直接反映到输入框的显示上。

修改后的输入框代码：

<input
  type="text"
  onChange={(e) => getText(e.target.value)}
  value={text} // 新增这一行
  name=""
  placeholder="Search for products, categories, ..."
  id=""
/>

为什么之前的代码不生效？ #

React中，表单元素默认是不受控的，除非你显式用value（或checked等）绑定状态。你之前只通过onChange更新状态，但输入框的显示值始终是用户输入的原始内容，不会跟随text状态变化。加上value={text}后，输入框的内容完全由text状态控制，调用setText('')就能清空输入框了。

另外，你当前的handleClick2逻辑是正确的，设置setText('')和setLiopen(true)可以同时清空状态并隐藏搜索列表，不需要额外修改。

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