如何为每个输入动态设置输入变化值

Question

export default function App() {
 const [list, setList] = useState([
 {
  id: uuid(),
  name: "",
  isRemovable: true,
},
 ]);
const [newRowValue, setNewRowValue] = React.useState("");
 const [newRowIsRemovable, setNewRowRemovable] = React.useState(true);

 const removeItem = (removeId) => {
   setList((prevState) => prevState.filter(({ id }) => id !== removeId));
 };

const addNewRowItem = (e) => {
e.preventDefault();

setList((prevState) => [
  ...prevState,
  {
    id: uuid(),
    name: newRowValue,
    isRemovable: newRowIsRemovable,
  },
]);
setNewRowValue("");
setNewRowRemovable(true);
 };
 return (
  <div className="app">
  
  {list.length > 0 ? (
    list.map(({ id, name, isRemovable }) => (
      <div className="uk-card uk-card-default uk-card-body" key={id}>
        <>
          <form
            className="uk-card uk-card-default uk-card-body"
            onSubmit={addNewRowItem}
          >
            <Input
              placeholder="Add a new row..."
              value={newRowValue}
              handleChange={(e) => setNewRowValue(e.target.value)}
            />
          </form>

          {isRemovable && (
            <Button
              color="danger"
              type="button"
              handleClick={() => removeItem(id)}
            >
              Remove
            </Button>
          )}
        </>
      </div>
    ))
  ) : (
    <div>(Empty List)</div>
  )}
  <form
    className="uk-card uk-card-default uk-card-body"
    onSubmit={addNewRowItem}
  >
    <Button
      className="uk-margin-small-bottom"
      color="secondary"
      type="submit"
    >
      Add Row
    </Button>
  </form>
</div>
);
}

我尝试通过单击添加行来添加新行，但是当用户在输入中输入值时，将应用相同的值。

如何让每个对象动态输入并推送到数组。

当我致电

addNewRowItem

时，我可以添加新项目，但我为第一个输入输入的值也会复制到新输入中

Answer 1

我们可以使用

list

的各个值，而不是对所有行使用单个

state

属性。当您更新任何值时，我们需要在更新值

list

事件后使用

setList([...list])

创建

onChange

的新引用，这会给出预期的输出！

import React, { FC, useState } from 'react';

import './style.css';
import { v4 as uuid } from 'uuid';

export const App: FC<{ name: string }> = ({ name }) => {
  const [list, setList] = useState([
    {
      id: uuid(),
      name: '',
      isRemovable: true,
    },
  ]);
  const [newRowValue, setNewRowValue] = React.useState('');
  const [newRowIsRemovable, setNewRowRemovable] = React.useState(true);

  const removeItem = (removeId) => {
    setList((prevState) => prevState.filter(({ id }) => id !== removeId));
  };

  const addNewRowItem = (e) => {
    e.preventDefault();

    setList((prevState) => [
      ...prevState,
      {
        id: uuid(),
        name: '',
        isRemovable: newRowIsRemovable,
      },
    ]);
    setNewRowValue('');
    setNewRowRemovable(true);
  };
  return (
    <div className="app">
      {list.length > 0 ? (
        list.map((item, index) => (
          <div className="uk-card uk-card-default uk-card-body" key={item.id}>
            <>
              <form
                className="uk-card uk-card-default uk-card-body"
                onSubmit={addNewRowItem}
              >
                <input
                  placeholder="Add a new row..."
                  defaultValue={item.name}
                  onChange={(e) => {
                    list[index].name = e.target.value;
                    setList([...list]);
                  }}
                />
              </form>

              {item.isRemovable && (
                <button
                  color="danger"
                  type="button"
                  onClick={() => removeItem(item.id)}
                >
                  Remove
                </button>
              )}
            </>
          </div>
        ))
      ) : (
        <div>(Empty List)</div>
      )}
      <form
        className="uk-card uk-card-default uk-card-body"
        onSubmit={addNewRowItem}
      >
        <button
          className="uk-margin-small-bottom"
          color="secondary"
          type="submit"
        >
          Add Row
        </button>
      </form>
      {JSON.stringify(list, null, 4)}
    </div>
  );
};

stackblitz 演示