Добавить / удалить входные данные формы динамически

Question

У меня есть form с одним начальным пустым полем input, которое я хочу клонировать с помощью кнопки Add и удалить с помощью кнопки Remove.

Поскольку использовать его не рекомендуется Индекс для ключей с динамическими c формами, я пытался использовать модуль uniqid. Но каждый раз, когда state обновляется, ключи обновляются, и у меня нет уникальных данных, чтобы идентифицировать каждый ввод формы. Я могу добавить некоторые элементы, но не могу удалить.

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>
  );

Answer 1

Вы можете просто расширить существующее 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:''}])
      }

С этим у вас будет уникальный id для привязки при удалении строк:

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

Ниже приведена демонстрация этой концепции:

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>

Answer 2

Вы должны создать переменную, которая начинается с 0 и добавляет 1 каждый раз, когда вы добавляете кнопку. Таким образом, вы будете следить за всеми. Вот пример

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