在React中,可以通过将onChange处理程序设置为监视从对象数组动态呈现的输入字段中的更改来实现。以下是一种实现方法:
import React, { useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState([{ id: 1, value: '' }, { id: 2, value: '' }]);
const handleChange = (id, value) => {
// 更新状态中对应对象的value属性
setData(prevData => {
return prevData.map(obj => {
if (obj.id === id) {
return { ...obj, value };
}
return obj;
});
});
};
return (
<div>
{data.map(obj => (
<input
key={obj.id}
value={obj.value}
onChange={e => handleChange(obj.id, e.target.value)}
/>
))}
</div>
);
};
export default MyComponent;
这样,当输入字段的值发生更改时,React将自动调用onChange处理程序,并更新状态中对应对象的value属性。
领取专属 10元无门槛券
手把手带您无忧上云