javascript - 在 React 中迭代表单元素数组

Question

我有一个带有表单的 React 功能组件，onSubmit 我想循环遍历所有表单元素......

export default function TransactionFilter() {

return (
   <form onSubmit={handleSubmit}>
      <TextField id="username" /><br/>
      <TextField id="password" /><br/>
   </form>
)

const handleSubmit = (event) => {
        event.preventDefault();
        var formElements = event.target.elements

        formElements.forEach(element => 
          console.log(`I found this ${element}`)
        );

但是这段代码给了我一个错误......

react-dom.development.js:476 Uncaught TypeError: formElements.forEach is not a function
    at handleSubmit (FilterForm.js:49)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)

我没有使用forEach吗？以正确的方式？如果不是，那么在 React 中迭代表单元素数组的正确方法是什么？

Answer 1

元素对象实际上是一个 HTMLFormControlsCollection对象。

您可以使用Array.prototype.forEach方法来迭代集合，如下所示:

Array.prototype.forEach.call(event.target.elements, (element) => {
  console.log(element);
})