reactjs - 使用 React 通过该数组中的组件事件从数组中删除一行

Question

以下是我遇到的问题的基本示例。

我有一个数组中的项目列表。用户可以将另一个项目添加到列表中，并显示在页面上。每个项目都有一个删除按钮，该删除按钮是数组项目内的一个组件（这样每个项目都可以有一个执行不同操作的按钮。在我的示例中，该操作正在删除，但稍后它可能是“发送”或“删除”或“取消”或“编辑”...）

问题是，当我在这种情况下单击“操作”删除时，我想知道这是数组中的哪个项目。这样，我可以获取数组索引并删除它。或者稍后从

import React, {useState} from "react"

function App() {

  const [list, setList] = useState([])

  function addRow(){
    let newRow = {
      name: "Test",
      action: <span onClick={e=>removeThisRow()}>REMOVE</span>
    }

    setList([
      ...list,
      newRow
    ])
  }

  function removeThisRow(){
    // need this to remove the specific item from my list array...
    console.log("removing...")
  }

  return (
    <div>
      {
        list.map(item=>(
          <div>
            {item.name} | {item.action}
          </div>
        ))
      }

      <div onClick={e=>addRow()}>ADD ROW</div>
    </div>
  );
}

export default App;

标签： reactjs

Answer 1

这是从数组中动态添加/编辑/删除项目的另一种方法。无需在数组中创建 JSX，您可以映射数组列表并根据唯一的id.

通过在添加新行之前添加两个额外的输入切换，您可以变得更加复杂。这两个切换可能会在创建行时向行添加一个isEditable和属性。isRemovable然后，这些属性可用于在显示列表时动态包含或排除按钮。这是一种更简洁的方法，因为您不会为每一行一遍又一遍地重新创建相同的按钮，但足够灵活以有条件地呈现它们。

在相关说明中，使用数组索引作为 akey是反模式。

演示源代码：

演示：https ://q3wph.csb.app/

代码：

import * as React from "react";
import { v4 as uuid } from "uuid";
import Button from "./components/Button";
import Input from "./components/Input";
import Switch from "./components/Switch";
import "./styles.css";

export default function App() {
  const [list, setList] = React.useState([]);
  const [editRow, setEditRow] = React.useState({
    id: "",
    value: ""
  });
  const [newRowValue, setNewRowValue] = React.useState("");
  const [newRowIsEditable, setNewRowEditable] = React.useState(true);
  const [newRowIsRemovable, setNewRowRemovable] = React.useState(true);

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

  const editItem = (editId) => {
    const { name } = list.find((item) => item.id === editId);
    setEditRow({ id: editId, value: name });
  };

  const updateRowItem = ({ target: { value } }) => {
    setEditRow((prevState) => ({ ...prevState, value }));
  };

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

    const { id, value } = editRow;

    if (!value) {
      alert("Please fill out the row input before updating the row!");
      return;
    }

    setList((prevState) =>
      prevState.map((item) =>
        item.id === id ? { ...item, name: value } : item
      )
    );
    setEditRow({ id: "", value: "" });
  };

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

    if (!newRowValue) {
      alert("Please fill out the new row item before submitting the form!");
      return;
    }

    setList((prevState) => [
      ...prevState,
      {
        id: uuid(),
        name: newRowValue,
        isEditable: newRowIsEditable,
        isRemovable: newRowIsRemovable
      }
    ]);
    setNewRowValue("");
    setNewRowEditable(true);
    setNewRowRemovable(true);
  };

  return (
    <div className="app">
      <h1>Dynamically Add/Edit/Remove Row</h1>
      {list.length > 0 ? (
        list.map(({ id, name, isEditable, isRemovable }) => (
          <div className="uk-card uk-card-default uk-card-body" key={id}>
            {editRow.id === id ? (
              <form onSubmit={handleRowUpdate}>
                <Input
                  placeholder="Add a new row..."
                  value={editRow.value}
                  handleChange={updateRowItem}
                />
                <Button color="secondary" type="submit">
                  Update Row
                </Button>
              </form>
            ) : (
              <>
                <h2 className="uk-card-title">{name}</h2>
                {isEditable && (
                  <Button
                    className="uk-margin-small-bottom"
                    color="primary"
                    type="button"
                    handleClick={() => editItem(id)}
                  >
                    Edit
                  </Button>
                )}
                {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}
      >
        <Input
          placeholder="Add a new row..."
          value={newRowValue}
          handleChange={(e) => setNewRowValue(e.target.value)}
        />
        <Switch
          label="Editable"
          handleChange={(e) => setNewRowEditable(Boolean(e.target.checked))}
          name="Editable"
          value={newRowIsEditable}
        />
        <Switch
          label="Removable"
          handleChange={(e) => setNewRowRemovable(Boolean(e.target.checked))}
          name="Removable"
          value={newRowIsRemovable}
        />
        <Button
          className="uk-margin-small-bottom"
          color="secondary"
          type="submit"
        >
          Add Row
        </Button>
        <Button color="danger" type="button" handleClick={() => setList([])}>
          Reset List
        </Button>
      </form>
    </div>
  );
}