[英]Iterating over form elements array in React
我有一個帶有表單的 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 中迭代表單元素數組的正確方法是什么?
元素對象實際上是一個HTMLFormControlsCollection對象。
您可以使用Array.prototype.forEach
方法來迭代集合,如下所示:
Array.prototype.forEach.call(event.target.elements, (element) => {
console.log(element);
})
event.target.elements
將返回 undefined
我建議以反應方式進行操作,將所有表單元素的數組置於狀態。
export default function TransactionFilter() {
const [formData, setFormData] = React.useState([
{ id: 'username', value:'' },
{ id: 'password', value:'' }
]);
const handleSubmit = (event) => {
event.preventDefault();
formData.forEach(element =>
console.log(`I found this ${element.value}`)
);
};
return (
<form onSubmit={handleSubmit}>
{formData.map((element, index) => {
return ( <React.Fragment>
<TextField id={element.id} value={element.value}
onChange={e => {
setFormData(
[
...formData.slice(0, index),
{ ...formData[index], value: e.target.value },
...formData.slice(index + 1)
]
);
}}
/>
<br/>
</React.Fragment>
);
})}
</form>
);
}
您還可以使用of
語法:
const handleSubmit = event => {
event.preventDefault()
for (const element of event.target.elements) {
console.log(`I found this ${element}`)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.