如何以动态形式创建和存储多个输入的值?

Question

我有一个表单，用户可以在其中为他想要提交的表单生成新的输入，但是我坚持处理新生成的输入的值，因为我需要将它们存储在state中。

我的代码

const [supply_detail_data,setSupply_detail_data]=React.useState({
suppCashDetail:[{text : [],val:[]}]
});
const addNewSuppDetailInput = () => {
setSupply_detail_data(
{suppCashDetail: [...supply_detail_data.suppCashDetail,{text : [],val:[]}]}
)
}
function supply_detail_handler(event){
// should store the values of inputs in the State
}

JSX

<div className='addNewInput' onClick={addNewSuppDetailInput}>+</div>
{
supply_detail_data.suppCashDetail.map((el,index) => {
let textID='suppDetailText'+index;
let valID='suppDetailVal'+index;
return (
<div key={index}>
•<input type='text' 
name={textID}
value={el.text||''} 
onChange={supply_detail_handler.bind(index)}
/>
<input type='number'
name={valID} 
value={el||''} 
onChange={supply_detail_handler.bind(index)}/> 
</div>
);
}) 
}

每次用户按下+生成的两个输入，一个是文本类型，另一个是number类型，我需要知道在值上执行的supply_detail_handler是如何变化来存储新生成的inputs

Answer 1

您需要为每个输入分配一个唯一标识符，稍后您可以在存储中使用。检查此示例：https://codesandbox.io/s/muddy-firefly-xz31w