,可以通过以下步骤实现:
const inputList = [
{ id: 1, value: '' },
{ id: 2, value: '' },
{ id: 3, value: '' },
];
import React, { useState } from 'react';
const MyComponent = () => {
const [inputs, setInputs] = useState(inputList);
// 其他组件代码...
return (
// JSX代码...
);
};
export default MyComponent;
import React, { useState } from 'react';
const MyComponent = () => {
const [inputs, setInputs] = useState(inputList);
const handleInputChange = (id, value) => {
const updatedInputs = inputs.map(input => {
if (input.id === id) {
return { ...input, value };
}
return input;
});
setInputs(updatedInputs);
};
return (
<div>
{inputs.map(input => (
<input
key={input.id}
value={input.value}
onChange={e => handleInputChange(input.id, e.target.value)}
/>
))}
</div>
);
};
export default MyComponent;
通过以上步骤,你可以在React Js中从数组列表中获取输入字段,并实时更新状态中的对应值。这种方法适用于需要动态生成输入字段的场景,例如表单中的多个输入项或动态添加的列表项。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云