React TypeScript邮箱标签输入组件报错，求修复方案

先梳理你代码里的核心问题，逐个解决：

1. 错误的ref绑定 #

TextField的ref={items}完全错误，items是你维护的状态数组，ref需要的是React引用对象（比如useRef()创建的实例），这里你根本不需要给TextField加ref，直接删掉这个属性即可。

2. 事件绑定未传递参数 #

onKeyDown={(e) => handleKeyDown}这种写法没有把事件对象传给handleKeyDown函数，导致函数里拿不到evt。正确写法是直接绑定函数：

onKeyDown={handleKeyDown}

同样的问题出现在onChange和onPaste上，全部改成直接绑定函数的形式。

3. 直接修改State数组 #

React的State是不可变的，items.push(test)直接修改原数组不会触发组件更新，必须用函数式更新创建新数组：

// 替换 items.push(test)
setItems(prevItems => [...prevItems, test])

4. 类型缺失与any滥用 #

把所有any换成具体类型，比如：

• 键盘事件：React.KeyboardEvent<HTMLInputElement>
• 输入变化事件：React.ChangeEvent<HTMLInputElement>
• 粘贴事件：React.ClipboardEvent<HTMLInputElement>
• 邮箱参数：string

5. handleItemEdit逻辑错误 #

编辑标签时，应该把当前要编辑的邮箱放到输入框，而不是setValue(value)，改成：

setValue(item)

6. handlePaste覆盖原有标签 #

粘贴邮箱时，setItem(toBeAdded)会清空原来的标签，应该合并到现有数组：

setItems(prevItems => [...prevItems, ...toBeAdded])

修复后的完整代码 #

import React, { useState } from "react";
import Chip from "@material-ui/core/Chip";
import TextField from "@material-ui/core/TextField";

export const TagActions = () => {
    const [items, setItems] = useState<string[]>([]);
    const [value, setValue] = useState('');
    const [error, setError] = useState('');

    const handleDelete = (item: string) => {
        const result = items.filter(i => i !== item);
        setItems(result);
    };

    const handleItemEdit = (item: string) => {
        const result = items.filter(i => i !== item);
        setItems(result);
        setValue(item); // 把要编辑的邮箱放到输入框
    };

    const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
        if (["Enter", "Tab", "|"].includes(evt.key)) {
            evt.preventDefault();

            const test = value.trim();

            if (test && isValid(test)) {
                // 用函数式更新创建新数组
                setItems(prev => [...prev, test]);
                setValue("");
                setError(""); // 清除错误提示
            }
        }
    };

    const isValid = (email: string): boolean => {
        let errorMsg = '';

        if (isInList(email)) {
            errorMsg = `${email} 已添加过。`;
        } else if (!isEmail(email)) {
            errorMsg = `${email} 不是有效的邮箱地址。`;
        }

        setError(errorMsg);
        return !errorMsg;
    };

    const isInList = (email: string): boolean => {
        return items.includes(email);
    };

    // 更严谨的邮箱正则（可选优化）
    const isEmail = (email: string): boolean => {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    };

    const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
        setValue(evt.target.value);
        setError(""); // 输入时清除错误提示
    };

    const handlePaste = (evt: React.ClipboardEvent<HTMLInputElement>) => {
        evt.preventDefault();

        const paste = evt.clipboardData.getData("text");
        const emails = paste.match(/[^\s@]+@[^\s@]+\.[^\s@]+/g);

        if (emails) {
            const toBeAdded = emails.filter(email => !isInList(email));
            // 合并到现有标签数组
            setItems(prev => [...prev, ...toBeAdded]);
        }
    };

    return (
        <>
            <TextField
                id="outlined-basic"
                variant="outlined"
                InputProps={{
                    startAdornment: items.map(item => (
                        <Chip
                            key={item}
                            tabIndex={-1}
                            label={item}
                            onDelete={() => handleDelete(item)}
                            onClick={() => handleItemEdit(item)}
                        />
                    )),
                }}
                value={value}
                placeholder="输入或粘贴邮箱地址，按Enter添加..."
                onKeyDown={handleKeyDown}
                onChange={handleChange}
                onPaste={handlePaste}
            />

            {error && <p className="error">{error}</p>}
        </>
    );
};

额外给你两个React TypeScript新手建议：

• 开启TypeScript严格模式（tsconfig.json里"strict": true），能提前帮你发现很多类型错误
• 处理State时永远记住不可变性，不要直接修改数组、对象，而是创建新的实例

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