如何为PrimeReact AutoComplete组件内部的input设置id

PrimeReact的AutoComplete组件提供了专门的inputId属性，用来直接为组件内部的input元素指定id——组件本身的id属性只会作用在外层容器上，不会传递给内部input。

修改你的代码如下：

<AutoComplete
  id='parent-autocomplete' // 该id作用在组件外层容器
  inputId='parent-autocomplete-input' // 此属性会将id赋值给内部input元素
  value={parent}
  onChange={(e) => setParent(e.value)}
  suggestions={filteredGroups}
  completeMethod={searchGroup}
  field='name'
  dropdown
></AutoComplete>

之后你就可以通过parent-autocomplete-input这个id定位到内部input元素，完成必填项校验操作。

如果需要做表单必填校验，也可以直接给AutoComplete组件添加required属性，结合表单原生校验逻辑使用；但如果你的场景必须依赖id，上述inputId方案完全可以满足需求。

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