Javascript 如何 for each 输入动态设置输入变更值

我们可以使用单独的值list，而不是对所有行使用单个state属性.当您更新任何值时，我们需要在更新值onChange事件之后使用setList([...list])创建一个list的新引用，这将给出预期的输出！

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 demo个