多个电子邮件输入字段自动填充为相同的值

Question

我有一个带有可变数量的电子邮件输入字段的表单。如果愿意，用户可以单击按钮添加其他电子邮件输入。然后，我的表单会映射出输入：

function renderEmailFields() {
  return [...Array(numberOfEmails).keys()].map((i) => {
    return (
      <div key={i} className={styles.inputContainer}>
         <InputValidatable
            autoFocus={true}
            className={styles.input}
            id={`supportSquadEmail-${i}`}
            isValid={Validation.isEmailAddress(inviteEmails[i])}
            name={`supportSquadEmail-${i}`}
            value={inviteEmails[i]}
            onChange={(e) => handleEmailChange(i, e)}
            placeholder="Enter email here..."
          />

 </div>
 );
});
}

const [inviteEmails, setInviteEmails] = useState(["", "", ""]);
const [numberOfEmails, setNumberOfEmails] = useState(3);

function handleEmailChange(index, e) {
   const placeHolderArray = inviteEmails;
   placeHolderArray[index] = e.target.value;
   setInviteEmails([...placeHolderArray]);
}

当我单击任何电子邮件输入时，我的 Chrome 浏览器会提供自动完成选项。选择自动完成选项之一会导致所有电子邮件输入都填充该值。