如何为React TagsInput组件添加URL校验及错误提示功能

你可以直接在现有提交逻辑中插入校验步骤，无需重构原有代码，具体修改如下：

• 修正正则语法错误（你给出的正则多写了一个等号，会触发语法报错），在组件内定义校验规则常量
• 在用户按回车提交输入的判断分支中，优先执行正则校验
• 校验不通过时弹出错误提示，终止后续添加标签的流程；校验通过后再执行原有的去重、入标签列表、清空输入的逻辑

如果你项目内已经集成了Toast类的轻量提示组件，可以把示例中的原生alert替换成对应组件调用，交互体验更好。

修改后的完整可运行代码：

export default function TagsInputLink(props) {
    const tags = props.tags
    const setTags = props.setTags
    const [input, setInput] = React.useState('');
    // 合法URL校验规则
    const validUrlRegex = /^(ftp|http|https):\/\/[^ "]+$/;

    const onChange = (e) => {
        const { value } = e.target;
        setInput(value);
    };

    const onKeyDown = (e) => {
        const { key } = e;
        const trimmedInput = input.trim();

        if ((key === 'Enter') && trimmedInput.length && !tags.includes(trimmedInput)) {
            e.preventDefault();
            // 新增URL合法性校验
            if (!validUrlRegex.test(trimmedInput)) {
                alert('请输入以ftp/http/https开头的合法URL');
                return;
            }
            // 校验通过后执行原有添加逻辑
            setTags(prevState => [...prevState, trimmedInput]);
            setInput('');
        }
    };

    const deleteTag = (index) => {
        setTags(prevState => prevState.filter((tag, i) => i !== index))
    }

    return (
        <div className={classes.container}>
            {tags.map((tag, index) => <div className={classes.tag}>
                <ClearIcon className={classes.del} fontSize="big" onClick={() => deleteTag(index)} />
                {tag}
            </div>
            )}
            <input
                className={classes.input}
                value={input}
                placeholder={props.inputPlaceholder}
                onKeyDown={onKeyDown}
                onChange={onChange}
            />
        </div>);
}

逻辑说明 #

• 校验触发时机设置在用户按回车确认提交时，不会打断用户正常输入
• 校验失败时不会清空已输入内容，用户可以直接修改错误内容后重新提交
• 原有标签去重、标签删除的逻辑完全保留，不会影响现有功能正常运行

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