Question

我是新来的反应和学习钩子。我在线上找到了一些示例，这些示例将im转换为使用钩子作为练习，但遇到了一个问题。我正在转换的示例，我无法弄清楚为什么表行上的功能handleRemoveSpecificRow的“删除”按钮不起作用。它应该删除该行。我被困在这一点上。任何帮助表示赞赏。

演示：https://codesandbox.io/s/zq185w2zkm

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Table, Button, Input } from "reactstrap";

function App() {
    const [rows, setRows] = useState([{}]);
    const handleChange = index => e => {
        const { name, value } = e.target;
        const rows = [...rows];
        rows[index] = {
            [name]: value
        };
        setRows(rows);
    };
    const handleAddRow = () => {
        const item = {
            column_1: "",
            column_2: ""
        };
        setRows([...rows, item]);
    };
    const handleRemoveRow = () => {
        setRows(rows.slice(0, -1));
    };
    const handleRemoveSpecificRow = index => () => {
        const rows = [...rows];
        rows.slice(index, 1);
        setRows(rows);
    };
    return (
        <div>
            <Table>
                <thead className="thead-light">
                    <tr>
                        <th>#</th>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th />
                    </tr>
                </thead>
                <tbody>
                    {rows.map((item, index) => (
                        <tr id="addr" key={index}>
                            <td>{index}</td>
                            <td>
                                <Input
                                    type="text"
                                    name="name"
                                    value={rows[index].column_1}
                                    onChange={handleChange(index)}
                                />
                            </td>
                            <td>
                                <Input
                                    type="text"
                                    name="mobile"
                                    value={rows[index].column_2}
                                    onChange={handleChange(index)}
                                />
                            </td>
                            <td>
                                <Button
                                    outline
                                    color="danger"
                                    onClick={handleRemoveSpecificRow(index)}
                                >
                                    Remove
                                </Button>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </Table>
            <Button onClick={handleAddRow}>Add Row</Button>
            <Button color="danger" onClick={handleRemoveRow}>
                Delete Row
            </Button>
        </div>
    );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我也有很多类似的疑问，重点放在数组/对象操作技术上。始终使用唯一的ID，键等以受控方式操纵数据。

https://codesandbox.io/s/y2lqj9qnjz

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Table, Button, Input } from "reactstrap";

function App() {
  const [rows, setRows] = useState([]);
  const handleChange = item => e => {
    const { name, value } = e.target;
    // const rows = [...rows];
    // rows[index] = {
    //     [name]: value
    // };
    let items = rows.map(row => {
      if (row.id === item.id) {
        row[name] = value;
      }
      return row;
    });
    setRows(items);
  };
  const handleAddRow = () => {
    let item = {
      id: rows.length + 1,
      column_1: "",
      column_2: ""
    };
    setRows([...rows, item]);
  };
  const handleRemoveRow = () => {
    setRows(rows.slice(0, -1));
  };
  const handleRemoveSpecificRow = item => () => {
    // const rows = [...rows];
    // rows.splice(index, 1);
    // setRows(rows);
    let items = rows.filter(row => row.id != item.id);
    setRows(items);
  };
  console.log(rows);
  return (
    <div>
      {rows.length != 0 && (
        <Table>
          <thead className="thead-light">
            <tr>
              <th>#</th>
              <th>Column 1</th>
              <th>Column 2</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {rows.map((item, index) => (
              <tr id="addr" key={index}>
                <td>{item.id}</td>
                <td>
                  <Input
                    type="text"
                    name="column_1"
                    value={item.column_1}
                    onChange={handleChange(item)}
                  />
                </td>
                <td>
                  <Input
                    type="text"
                    name="column_2"
                    value={item.column_2}
                    onChange={handleChange(item)}
                  />
                </td>
                <td>
                  <Button
                    outline
                    color="danger"
                    onClick={handleRemoveSpecificRow(item)}
                  >
                    Remove
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
      <Button onClick={handleAddRow}>Add Row</Button>
      <Button color="danger" onClick={handleRemoveRow}>
        Delete Row
      </Button>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

https://codesandbox.io/s/y2lqj9qnjz 我已经更新了上面的链接。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Table, Button, Input } from "reactstrap";

function App() {
  const [rows, setRows] = useState([
    {
      id: 1,
      column_1: "",
      column_2: ""
    }
  ]);
  const handleChange = (item) => (e) => {
    const { name, value } = e.target;
    // const rows = [...rows];
    // rows[index] = {
    //     [name]: value
    // };
    let items = rows.map((row) => {
      if (row.id === item.id) {
        row[name] = value;
      }
      return row;
    });
    setRows(items);
  };
  const handleAddRow = () => {
    let item = {
      id: rows[rows.length - 1].id + 1,
      column_1: "",
      column_2: ""
    };
    setRows([...rows, item]);
  };
  const handleRemoveRow = () => {
    setRows(rows.slice(0, -1));
  };
  const handleRemoveSpecificRow = (item) => () => {
    // const rows = [...rows];
    // rows.splice(index, 1);
    // setRows(rows);
    let items = rows.filter((row) => row.id != item.id);
    setRows(items);
  };

  return (
    <div>
      {rows.length != 0 && (
        <Table>
          <thead className="thead-light">
            <tr>
              <th>#</th>
              <th>Column 1</th>
              <th>Column 2</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {rows.map((item, index) => (
              <tr id="addr" key={index}>
                <td>{item.id}</td>
                <td>
                  <Input
                    type="text"
                    name="column_1"
                    value={item.column_1}
                    onChange={handleChange(item)}
                  />
                </td>
                <td>
                  <Input
                    type="text"
                    name="column_2"
                    value={item.column_2}
                    onChange={handleChange(item)}
                  />
                </td>
                <td>
                  <Button
                    outline
                    color="danger"
                    onClick={handleRemoveSpecificRow(item)}
                  >
                    Remove
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
      <Button onClick={handleAddRow}>Add Row</Button>
      <Button color="danger" onClick={handleRemoveRow}>
        Delete Row
      </Button>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用挂钩删除表格行

2 个答案: