在数组中存储多封电子邮件 - Html 输入元素答案

【问题标题】：Store Multiple Emails in Array - Html Input Element在数组中存储多封电子邮件 - Html 输入元素
【发布时间】：2021-07-19 06:01:32
【问题描述】：

我有一个小型的 React Bootstrap。我的目标是我想存储用户在输入字段中输入的多个电子邮件并将它们存储在一个数组中。但我看看我是否使用

onChange={()=> setEmails(e.target.value as any}

它将它们存储在这样的字符串中--> xyz@gmail.com,abc@gmail.com 我想要的是['xyz@gmail.com',abc@gmail.com];

我正在使用 React Js，这里是我的代码的一些概述

const [emails, setEmail] = useState<string[]>([])

 <Form.Control required onChange={(e) => setEmail(e.target.value)} value={emails} style={{ borderRadius: '0' }}  multiple type="email" />

任何帮助表示赞赏 - 在此先感谢。

【问题讨论】：

标签： javascript html reactjs typescript

【解决方案1】：

谢谢这是帮助我实现目标的代码

onChange={(e) => handleChange(e)}

在句柄更改中，我用逗号 (,) 拆分了值，它帮助我分隔了电子邮件 ID。抓住这里是在输入字段中，我需要在每个电子邮件 ID 后添加一个逗号，例如：- abc@gmail.com,xyz@gmail.com,example@ymail.com

  const handleChange = (e: any) => {
    let email = e.target.value.split(",")
    setEmail(email)
}

【讨论】：

它仍然有单个电子邮件
同时添加尽可能多的可复制代码，以帮助理解。
这是我的状态 const [emails, setEmail] = useState<string[]>([]) 和我在表单输入字段 <Form.Control required onChange={(e) => handleChange(e)} value={emails} style={{ borderRadius: '0' }} multiple type="email" /> 上应用的 onChange 方法

【解决方案2】：

您每次都在设置新的电子邮件。您想要的是推送一个新值到之前的 State 值。

试试这个：

onChange={(e) => setEmail(prev => [...prev,e.target.value])}

... Spread 运算符扩展数组元素。

【讨论】：

每当我尝试输入内容时都会出现此错误：- TypeError: Cannot read property 'value' of null