React中在搜索框内添加搜索图标报错问题求助

问题根源 #

你碰到的Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML错误，核心原因是<input>属于HTML空元素（void element）——这类元素在规范里不允许包含任何子节点或内部内容，你把<i>图标标签嵌套在<input>内部，直接违反了这个规则。

修复方案 #

把图标从<input>内部移出，和<input>放在同一父容器中，再通过CSS定位让图标视觉上显示在输入框内部。

修改后的代码示例 #

<div className='search'>
  {/* 将图标与input设置为同级元素 */}
  <i className="fa fa-search" aria-hidden="true"></i>  
  <input
    id="quick_search"
    className="xs-hide"
    name="quick_search"
    placeholder="Search by creator, collectible or collection."
    type="text"
    onChange={(e) => {
      changeKey(e);
    }}
    onKeyDown={keyPress}
    value={keyword} 
  />
</div>

配套CSS调整 #

给父容器设置相对定位，图标用绝对定位调整到输入框内的合适位置：

.search {
  position: relative;
  /* 根据自身布局需求调整宽度 */
  width: 320px;
}

.search .fa-search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  /* 防止图标干扰输入框点击交互 */
  pointer-events: none;
}

.search input {
  padding-left: 40px;
  width: 100%;
  box-sizing: border-box;
  /* 以下为示例样式，可根据需求修改 */
  height: 42px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

额外说明 #

• React严格遵循HTML规范，像<input>、<img>、<br>这类空元素，都不能包含子元素，JSX中推荐使用自闭合写法（<input />）。
• 添加pointer-events: none可以保证用户点击图标区域时，交互事件能穿透到下方的输入框，不影响正常输入操作。

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