如何用TypeScript、React、MUI等技术实现邮箱格式输入下拉选择功能

技术栈 #

• TypeScript
• React
• MUI
• ReactHookForm
• Yup

功能要求 #

• 在TextField中输入内容，当输入字符串符合邮箱格式时，弹出包含该邮箱的下拉选择列表
• 点击下拉列表，可查看「可访问用户」列表

界面状态说明 #

• 输入中状态：TextField接收用户输入数据
• 邮箱匹配触发状态：输入内容判定为邮箱格式时，下拉列表自动弹出
• 用户列表展示状态：点击下拉列表后，展示「可访问用户」列表

参考实现 #

可参考对应示例代码（对应文件路径：/src/InvitationButton.tsx）

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