PrimeReact AutoComplete必填项输入值后红色警告边框未消失问题

问题现象 #

将AutoComplete标记为必填项后，初始状态下红色警告边框和提示文本正常显示，但输入值后，警告样式并未像InputText组件那样自动消失。

初始状态（name和leader字段均未输入值）：

输入值后的状态：

可见name输入框表现符合预期，但AutoComplete输入框的红色边框和警告文本未移除。

问题根源 #

对比两段代码就能发现核心问题：

• InputText组件的状态判断依赖group.name，且onChange会同步更新group.name的值，输入内容后!group.name变为假，警告自动消失
• AutoComplete组件的状态判断用的是group.leader，但组件的value绑定的是独立变量leader，onChange只更新了leader而非group.leader，导致submitted && !group.leader始终为真，警告不会消失

另外原代码中label的htmlFor属性写的是autocomplete，但AutoComplete的inputId是leader，这会导致点击标签无法聚焦输入框，属于连带问题，建议一并修复。

修复方案 #

方案1：同步更新group对象中的leader字段 #

修改AutoComplete的onChange逻辑，在更新leader变量的同时同步更新group.leader：

<div className='field col'>
  <span className='p-float-label'>
    <AutoComplete
      id='leader-autocomplete'
      value={leader}
      onChange={(e) => {
        setLeader(e.value);
        // 同步更新group中的leader字段
        setGroup(prev => ({ ...prev, leader: e.value }));
      }}
      suggestions={filteredUsers}
      completeMethod={searchUser}
      field='leader'
      inputId='leader'
      minLength={3}
      required
      className={classNames({'p-invalid': submitted && !group.leader})}
    ></AutoComplete>
    <label htmlFor='leader'>Leader</label>
  </span>
  {submitted && !group.leader && (
    <small className='p-invalid'>Leader is required.</small>
  )}
</div>

方案2：统一状态判断的依赖变量 #

如果不需要将leader存入group对象，直接将判断条件改为依赖leader变量即可：

<div className='field col'>
  <span className='p-float-label'>
    <AutoComplete
      id='leader-autocomplete'
      value={leader}
      onChange={(e) => setLeader(e.value)}
      suggestions={filteredUsers}
      completeMethod={searchUser}
      field='leader'
      inputId='leader'
      minLength={3}
      required
      className={classNames({'p-invalid': submitted && !leader})}
    ></AutoComplete>
    <label htmlFor='leader'>Leader</label>
  </span>
  {submitted && !leader && (
    <small className='p-invalid'>Leader is required.</small>
  )}
</div>

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