Javascript 动态添加/删除表单输入

我有一个

表单

，其中有一个初始为空的

输入

字段，我希望使用

添加

按钮克隆该字段，并使用

删除

按钮删除该字段

由于不建议对具有动态表单的键使用索引，我尝试使用

uniqid

模块。但是每次

状态更新时，键都会更新，并且我没有唯一的数据来标识表单的每个输入。我可以添加一些项目，但无法删除

input
字段没有唯一值，没有
id
，我该怎么办

const Form = () => {
  const update = e => {};
  const items = [{ content: "", color: "" }];

  return (
    <Fragment>
      {items.map((item, idx) => (
        <input
          htmlFor={`item_${idx}`}
          value={item.content}
          onChange={update("item", idx)}
        />
      ))}
      <button onClick={e => dispatch(add(idx))}>Add</button>
      <button onClick={e => dispatch(remove(idx))}>Remove</button>
    </Fragment>
  );

const Form=（）=>{
const update=e=>{}；
常量项=[{content:，color:}]；
返回(
{items.map（（item，idx）=>(
))}
分派（添加（idx））}>添加
分派（删除（idx））}>删除
);
您应该创建一个变量，该变量从0开始，每次添加按钮时添加1。这样你就可以跟踪每个人。这里有一个例子

let i = 0
const add () => {
//your function to add
i++
//remember i will be the id now
}

您应该创建一个变量，该变量从0开始，并在每次添加按钮时添加1。这样你就可以跟踪每个人。这里有一个例子

let i = 0
const add () => {
//your function to add
i++
//remember i will be the id now
}

您可以简单地扩展现有的
项
以拥有唯一的
id
属性-最简单的方法是，您可以将最大使用
id
的值指定给该属性，增加1-我想，对于大多数实际使用情况，这会起到作用：

const [inputs, setInputs] = useState([{id:0,value:''}]),
      onRowAdd = () => {
          const maxId = Math.max(...inputs.map(({id}) => id))
          setInputs([...inputs, {id:maxId+1, value:''}])
      }

这样，当您删除行时，您将拥有唯一的
id
：

onRowRemove = idToDelete => setInputs(inputs.filter(({id}) => id != idToDelete))

以下是该概念的演示：


const{useState}=React，
{render}=ReactDOM
常数形式=（）=>{
const[inputs，setInputs]=useState（[{id:0，值：“”}），
onInput=（id，值）=>{
常量输入透视=[…输入]，
itemToModify=inputScope.find（item=>item.id==id）
itemToModify.value=值
设置输入（输入）
},
onRowAdd=（）=>{
const maxId=Math.max（…inputs.map（（{id}）=>id））
setInputs（[…输入，{id:maxId+1，值：''}]）
},
onRowRemove=idToDelete=>setInputs（inputs.filter（（{id}）=>id！=idToDelete）），
onFormSubmit=e=>（e.preventDefault（），console.log（输入））
返回(
{
inputs.map（{id，value}）=>(
onInput（id，值）}
/>
onRowRemove（id）}value=“Remove”/>
))
}
)
}
渲染(
,
document.getElementById（'root'））
)
您可以简单地扩展现有的
项
以拥有唯一的
id
属性-最简单的方法是，您可以将最大使用
id
的值增加1到该属性-我想，对于大多数实际使用情况，这将起到作用：

const [inputs, setInputs] = useState([{id:0,value:''}]),
      onRowAdd = () => {
          const maxId = Math.max(...inputs.map(({id}) => id))
          setInputs([...inputs, {id:maxId+1, value:''}])
      }

这样，当您删除行时，您将拥有唯一的
id
：

onRowRemove = idToDelete => setInputs(inputs.filter(({id}) => id != idToDelete))

以下是该概念的演示：


const{useState}=React，
{render}=ReactDOM
常数形式=（）=>{
const[inputs，setInputs]=useState（[{id:0，值：“”}），
onInput=（id，值）=>{
常量输入透视=[…输入]，
itemToModify=inputScope.find（item=>item.id==id）
itemToModify.value=值
设置输入（输入）
},
onRowAdd=（）=>{
const maxId=Math.max（…inputs.map（（{id}）=>id））
setInputs（[…输入，{id:maxId+1，值：''}]）
},
onRowRemove=idToDelete=>setInputs（inputs.filter（（{id}）=>id！=idToDelete）），
onFormSubmit=e=>（e.preventDefault（），console.log（输入））
返回(
{
inputs.map（{id，value}）=>(
onInput（id，值）}
/>
onRowRemove（id）}value=“Remove”/>
))
}
)
}
渲染(
,
document.getElementById（'root'））
)