Обновление значения текстового поля через событие OnChange

Чтобы использовать event.target.name, для элементов, определенных в html/jsx, должен быть определен атрибут name. Например, для ввода id, если postData ожидает атрибут id, вам понадобится

<input type = "text" onChange = {handleInput} name = "id" value = {cookie.id}></input>

скорее, чем

<input type = "text" onChange = {handleInput} value = {cookie.id}></input>

потому что без этого форма фактически не сможет узнать, где искать данные.

Теперь, если у вас есть имена, обработчики могут разрешить целевые данные, если использовать поля имени целевого объекта в событии.

Поэтому, если вы просто хотите обновить входные значения по мере их отображения, вы можете просто обновить состояние cookies, а не postData.

если вы храните данные в cookies, это в форме {id:number(or string), name:string, desc:price, price:number}[]

Итак, массив объектов cookie. И вы используете это состояние для рендеринга входных значений, поэтому, если вы хотите, чтобы оно обновлялось, вам нужно указать свойство в data при обновлении.

Итак, один из способов сделать так, чтобы имя было некоторым значением, из которого вы можете переиндексировать этот data объект примерно так const name=(index:number)=>(property:string)=>${index}/${property}, а затем при установке значения вы можете сделать что-то вроде

const handleInput = (event) => {
  const [index, property] = event.target.name.split("/");
  setCookies((data) =>
    data.map((row, idx) =>
      idx === parseInt(index)
        ? { ...row, [property]: event.target.value }
        : row,
    ),
  );
};

или вы можете назначить отдельные обработчики входам для обновления значения, например

const createHandleInput = (index:number)=>(property:string)=>setCookies((data) =>
    data.map((row, idx) =>
      idx === index
        ? { ...row, [property]: event.target.value }
        : row,
    ),
  );

а потом

{
  cookies.map((cookie, index) => {
    const getInputHandler = createHandleInput(index);
    return (
      <form key = {cookie.id}>
        <input type = "text" onChange = {getInputHandler("id")} value = {cookie.id}></input>
        <input type = "text" onChange = {getInputHandler("name")} value = {cookie.name}></input>
        <input type = "text" onChange = {getInputHandler("desc")} value = {cookie.desc}></input>
        <input type = "text" onChange = {getInputHandler("price")} value = {cookie.price}></input>
        <input type = "submit"></input>
      </form>
    );
  });
}

И тогда на этом этапе вам не нужны атрибуты имени, я удалил их в примере для краткости, они могут быть некоторыми причинами, чтобы сохранить также.

Тогда я все еще думаю, что вам следует использовать кнопку для отправки, и на этом этапе вам даже не нужно состояние postData, вы можете просто опубликовать любую строку из данных состояния cookies. если только вы действительно не хотите публиковать только те, которые были явно обновлены, но обычно это не имеет значения.

Таким образом, у вас может быть что-то похожее на то, что у нас было раньше.

const createSubmitHandler = (index: number) => {
  const data = cookies[index];
  // whatever submit logic you want
};

и

{
  cookies.map((cookie, index) => {
    const getInputHandler = createHandleInput(index);
    return (
      <form key = {cookie.id}>
        <input type = "text" onChange = {getInputHandler("id")} value = {cookie.id}></input>
        <input type = "text" onChange = {getInputHandler("name")} value = {cookie.name}></input>
        <input type = "text" onChange = {getInputHandler("desc")} value = {cookie.desc}></input>
        <input type = "text" onChange = {getInputHandler("price")} value = {cookie.price}></input>
        <button type = "button" onClick = {createSubmitHandler(index)}>
          sumit
        </button>
      </form>
    );
  });
}