[英]Add/remove form inputs dynamically
I have a form
with one initial empty input
field that I want to clone using a Add
button and to remove with a Remove
one.我有一个带有一个初始空input
字段的form
,我想使用“ Add
按钮克隆它并使用“删除”按钮将其Remove
。
As it's not recommended to use index for the keys with dynamic forms, I tried to use uniqid
module.由于不建议对具有动态形式的键使用索引,我尝试使用uniqid
模块。 But each time the state
is updating, keys are renewed and I don't have unique data to identify each input of the form.但是每次state
更新时,密钥都会更新,我没有唯一的数据来识别表单的每个输入。 I can add some items, but can't remove.我可以添加一些项目,但无法删除。
input
fields have no unique values, no id
, how can I do ? 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>
);
You may simply extend your existing items
to have unique id
property - at its very simplest, you may assign the value of maximum used id
increased by 1 to that property - I guess, it'll do the trick for most of practical use cases:您可以简单地将现有items
扩展为具有唯一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:''}])
}
With that, you'll have unique id
to anchor to as you delete rows:有了它,您将在删除行时拥有唯一的id
来锚定:
onRowRemove = idToDelete => setInputs(inputs.filter(({id}) => id != idToDelete))
Following is the demo of this concept:以下是这个概念的演示:
const { useState } = React, { render } = ReactDOM const Form = () => { const [inputs, setInputs] = useState([{id:0,value:''}]), onInput = (id,value) => { const inputsCopy = [...inputs], itemToModify = inputsCopy.find(item => item.id == id) itemToModify.value = value setInputs(inputsCopy) }, onRowAdd = () => { const maxId = Math.max(...inputs.map(({id}) => id)) setInputs([...inputs, {id:maxId+1, value:''}]) }, onRowRemove = idToDelete => setInputs(inputs.filter(({id}) => id != idToDelete)), onFormSubmit = e => (e.preventDefault(), console.log(inputs)) return ( <form onSubmit={onFormSubmit} > { inputs.map(({id,value}) => ( <div key={id}> <input onKeyUp={({target:{value}}) => onInput(id,value)} /> <input type="button" onClick={onRowAdd} value="Add" /> <input type="button" onClick={() => onRowRemove(id)} value="Remove" /> </div> )) } <input type="submit" value="Log Form Data" /> </form> ) } render ( <Form />, document.getElementById('root') )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
You should create a variable that starts from 0 and adds 1 every time you add a button.您应该创建一个从 0 开始并在每次添加按钮时加 1 的变量。 That way you will keep track of everyone.这样你就可以跟踪每个人。 Here's an example这是一个例子
let i = 0
const add () => {
//your function to add
i++
//remember i will be the id now
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.