react-multi-email介绍

react-multi-email 是一个 React 组件，用于实现 多邮箱输入框 的功能，允许用户在一个输入框中输入多个邮箱地址，支持自动分隔邮箱、输入验证以及删除功能。这个组件通常用于类似 收件人输入框（例如 Gmail 或邮件系统中的“收件人”字段）等场景，可以提升用户输入多个邮箱的体验。

1. 核心功能

多邮箱输入
- 允许用户输入多个邮箱地址，并自动以逗号或空格等分隔符分隔
自动验证
- 输入时自动验证每个邮箱地址的合法性
删除功能
- 用户可以删除已输入的邮箱地址
自定义分隔符
- 支持自定义邮箱分隔符，常见的是逗号、空格等
键盘支持
- 支持键盘操作，如通过按下“Enter”键或“Tab”键添加邮箱
可定制化样式和行为
- 通过 props 定制样式、验证规则和其他行为

2. 安装

npm install react-multi-email

3. 基本用法

import React, { useState } from "react";
import MultiEmailInput from "react-multi-email";
import "react-multi-email/style.css"; // 导入默认样式

function EmailInput() {
  const [emails, setEmails] = useState([]);

  const handleEmailChange = (newEmails) => {
    setEmails(newEmails);
  };

  return (
    <div>
      <MultiEmailInput
        value={emails}
        onChange={handleEmailChange}
        maxLength={5} // 最多允许输入5个邮箱
        validateEmail={(email) => /.+@.+\..+/.test(email)} // 自定义邮箱验证规则
      />
      <div>已输入的邮箱: {emails.join(", ")}</div>
    </div>
  );
}

export default EmailInput;

说明：

value 和 onChange 用于管理和更新输入的邮箱地址列表

maxLength 限制最多输入的邮箱数量

validateEmail 用于自定义验证规则，这里使用简单的正则表达式进行邮箱格式验证

4. 常用 Props

属性	类型	说明
`value`	string[]	当前输入的邮箱地址数组
`onChange`	function	监听邮箱列表变化，参数为新邮箱地址数组
`maxLength`	number	限制邮箱数量，超出后无法输入更多邮箱
`validateEmail`	function	自定义邮箱验证规则，返回 `true` 或 `false`
`onAddEmail`	function	每次添加新邮箱时触发的回调
`onDeleteEmail`	function	每次删除邮箱时触发的回调
`placeholder`	string	输入框的占位符
`disableDelete`	boolean	是否禁用删除功能
`inputProps`	object	传递给输入框的其他 `props`
`inputStyle`	object	输入框的自定义样式

5. 示例：邮件收件人输入框

import React, { useState } from "react";
import MultiEmailInput from "react-multi-email";
import "react-multi-email/style.css"; // 导入默认样式

function EmailForm() {
  const [emails, setEmails] = useState([]);

  const handleEmailChange = (newEmails) => {
    setEmails(newEmails);
  };

  return (
    <div style={{ width: 400 }}>
      <h3>输入收件人邮箱</h3>
      <MultiEmailInput
        value={emails}
        onChange={handleEmailChange}
        maxLength={10}
        validateEmail={(email) => /.+@.+\..+/.test(email)} // 通过正则验证邮箱格式
        placeholder="请输入邮箱（按回车分隔）"
        inputProps={{ style: { padding: "8px" } }}
      />
      <div>
        <h4>已输入的邮箱：</h4>
        <p>{emails.join(", ")}</p>
      </div>
    </div>
  );
}

export default EmailForm;

6. 应用场景

收件人输入框
- 类似 Gmail 或 Outlook 等邮件系统中的收件人输入框，允许用户输入多个邮箱地址
表单中输入多个邮箱
- 适用于邀请、注册等需要输入多个邮箱的表单
社交平台用户标签
- 支持多个用户标记，类似输入多个联系人或社交账户
营销邮件系统
- 适用于群发邮件的邮箱列表输入

7. 优缺点

优点：

多邮箱输入：支持多个邮箱的输入和管理
灵活性：自定义验证规则、样式、事件等
用户友好：自动处理邮箱的添加与删除，提升用户体验
可控性：支持受控组件方式，方便与其他状态管理结合

缺点：

性能问题：在非常长的邮箱列表下可能会有一些性能问题
自定义功能局限：对于一些复杂的邮箱管理（例如自动建议或批量操作）可能需要进一步扩展

8. 总结

react-multi-email 是一个 多邮箱输入组件，提供了易用的接口来实现邮箱的批量输入、验证和删除，适用于 邮件系统、社交平台、用户管理 等场景。它通过自动验证、动态显示 和 删除功能 提升了用户体验。