如何预填充搜索栏默认值且允许用户后续修改输入内容？

这个需求在纯原生HTML场景下不需要额外JS就能实现，你遇到的无法修改的问题是因为使用了框架的受控组件绑定语法导致的。

• 原生HTML的value属性本身就是用来指定输入框的初始默认值，设置后用户可以正常修改内容，直接写死预设值即可，示例代码：

<input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value="预设的搜索内容">

• 如果你是在React、Vue等前端框架中使用value={comparelinks}这种变量绑定写法，输入框会默认变为受控组件，值完全和绑定的变量挂钩，没有配置更新逻辑时就会出现无法修改的问题。这种场景下有两种解决方案：
  1. 用框架提供的defaultValue属性代替value绑定初始值，不需要额外写更新逻辑，效果和原生HTML的value一致：

  <input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" defaultValue={comparelinks}></input>
  

  2. 保留value绑定，补充对应的值更新事件逻辑，以React为例：

  // 声明绑定的状态
  const [comparelinks, setComparelinks] = useState('预设的初始值')
  // 输入框写法
  <input 
    type="search" 
    class="navBarSearchForm3 form-control rounded searchterm2" 
    placeholder="search term" 
    value={comparelinks}
    onChange={e => setComparelinks(e.target.value)}
  />
  

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