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

【问题标题】：How to create and store values of multiple inputs in a dynamic form?如何以动态形式创建和存储多个输入的值？
【发布时间】：2020-05-24 17:11:25
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-hooks react-state react-functional-component

【解决方案1】：

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

【讨论】：