javascript - 我们可以循环遍历 event.target 并获取表单内每个元素的属性值吗

Question

我想知道我们是否可以循环遍历 event.target 并获取表单内每个元素的属性值。我正在尝试在 Reactjs 中实现这个。只有一个基本形式，如下所示

<form onSubmit={this.handleSubmit}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="password" name="password" />
</form> 

在handleSubmit函数中，代码如下

handleSubmit(event) {
    event.preventDefault();

    let target   = event.target;
    let formData = {};

    formData.username = target.name.value;
    formData.email    = target.email.value;
    formData.passowrd = target.passowrd.value;

    console.log(formData);
}

我根据需要在 console.log 中获取用户填写的数据。但正如您所看到的，我需要指定每个元素才能获取 formData，想象一个包含 20-30 个元素的表单。

我尝试做下面给出的事情

count = 0;
formData = [];
foreach(target as item) {
    formData[count][item.name] = item.value;
}

它基本上是 PHP 代码，但是放在这里以便您可以看到我正在尝试做什么。我尝试执行此 js，但它给了我各种错误。请告知是否可以用js实现如果是这样？我怎样才能实现它？

Answer 1

我想你正在寻找这个:

handleSubmit(event) {
    event.preventDefault();

    let target   = event.target;
    let formData = {};

    for (let i = 0; i < target.length; i++) {
        formData[target.elements[i].getAttribute("name")] = target.elements[i].value;
    }
    console.log('formData', formData); 
}