React MUI Autocomplete组件添加重复值错误提示实现问询

要实现当用户尝试添加重复标签时显示警告，你可以通过监听输入事件和输入框的键盘事件，结合状态控制警告的显示，具体步骤如下：

1. 添加状态控制警告显示
   在组件内部引入useState管理警告的显示状态，同时添加自动隐藏逻辑避免警告持续显示：

   import { useState, useEffect } from 'react';
   import { Typography } from '@mui/material';
   
   // 组件内部状态
   const [showDuplicateWarning, setShowDuplicateWarning] = useState(false);
   
   // 统一处理警告显示与自动隐藏，避免多个定时器冲突
   const handleShowDuplicateWarning = () => {
     setShowDuplicateWarning(true);
     clearTimeout(window.duplicateWarningTimer);
     window.duplicateWarningTimer = setTimeout(() => {
       setShowDuplicateWarning(false);
     }, 3000);
   };
   
   // 当已有标签列表变化时，自动隐藏警告
   useEffect(() => {
     setShowDuplicateWarning(false);
   }, [props.initEmails]);
   

2. 修改Autocomplete组件，添加事件监听

   • 通过onInputChange监听用户从下拉列表选择已存在项的行为
   • 通过输入框的onKeyDown监听用户回车输入重复值的行为
   • 在输入框下方添加警告提示文本

   修改后的完整组件代码：

   <Autocomplete
     PaperComponent={CustomPaper}
     onChange={(event: any, newValue: string[], reason: string) => {
       handleInputUsersChange(event, newValue, reason);
     }}
     // 监听输入值变化，处理下拉选择重复项的情况
     onInputChange={(event, newInputValue) => {
       if (newInputValue && props.initEmails.includes(newInputValue)) {
         handleShowDuplicateWarning();
       }
     }}
     autoComplete
     freeSolo
     fullWidth
     multiple
     id={props.id}
     value={props.initEmails}
     options={listUsers.map((item) => item.name)}
     renderInput={(params) => {
       return (
         <div 
           ref={params.InputProps.ref} 
           style={{ display: 'flex', flexDirection: 'column' }} 
           data-test="test-div-autocomplete-comp"
         >
           <TextField
             {...params}
             style={{ width: '1200px' }}
             // 监听回车事件，处理手动输入重复值的情况
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 const inputValue = params.inputProps.value.trim();
                 if (inputValue && props.initEmails.includes(inputValue)) {
                   handleShowDuplicateWarning();
                 }
               }
             }}
           />
           {/* 显示重复警告 */}
           {showDuplicateWarning && (
             <Typography color="error" variant="body2" style={{ marginTop: 4 }}>
               不允许输入重复值
             </Typography>
           )}
         </div>
       );
     }}
   />
   

说明 #

• 覆盖两种场景：用户手动输入重复值后按回车、从下拉列表选择已存在的标签
• 警告会在3秒后自动隐藏，避免干扰用户操作
• 当已有标签列表发生变化（比如删除标签）时，警告会自动隐藏

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