处理数组内对象的onChange (反应状态)可以通过以下步骤进行:
以下是一个示例代码,演示如何处理数组内对象的onChange:
import React, { useState } from 'react';
const App = () => {
const [items, setItems] = useState([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]);
const handleItemChange = (index, key, value) => {
const newItems = [...items];
newItems[index] = {
...newItems[index],
[key]: value
};
setItems(newItems);
// 执行其他操作
// ...
};
return (
<div>
{items.map((item, index) => (
<input
key={item.id}
value={item.name}
onChange={(e) => handleItemChange(index, 'name', e.target.value)}
/>
))}
</div>
);
};
export default App;
在这个示例中,我们使用useState来管理items数组的状态。在handleItemChange函数中,我们使用浅拷贝创建了一个新的数组newItems,并更新了指定索引的对象的name属性。然后,我们使用setItems来更新items数组的状态。
这个示例中的onChange事件处理函数接收了索引、属性名和新的属性值作为参数,并在更新对象属性后执行其他操作。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云