React类组件实现列表项删除及表格更新的方法

要实现删除指定项并同步更新表格，核心是利用React的单向数据流，由父组件管理数据状态，子组件触发删除动作后父组件更新状态，从而自动刷新表格。具体步骤如下：

1. 在父组件添加删除逻辑 #

在UploadFileBolla类中添加删除方法，通过过滤数组移除目标项并更新state：

handleDeleteItem = (codart) => {
  // 过滤掉要删除的条目，保留codart不匹配的项
  const updatedList = this.state.listarticoli.filter(item => item.codart !== codart);
  this.setState({ listarticoli: updatedList });
};

2. 传递删除方法给子组件 #

在父组件的render方法中，将删除方法作为props传给TableArticoli：

{this.state.listarticoli.length > 0 ? 
  <TableArticoli list={this.state.listarticoli} onDelete={this.handleDeleteItem} /> : 
  <></>
}

3. 子组件绑定删除按钮事件 #

修改TableArticoli组件，给删除按钮添加点击事件，调用父组件传来的删除方法，同时给列表项添加唯一key（避免React渲染警告）：

function TableArticoli(props) {
  return (
    <Table striped bordered hover editable>
      <thead>
        <tr>
          <th>N° riga</th>
          <th>Codice</th>
          <th>Descrizione</th>
          <th>Prezzo</th>
          <th>Quantita</th>
          <th>Totale</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        {props.list.map((item, i) => {
          return (
            <tr key={item.codart}> {/* 添加唯一key */}
              <td>{i}</td>
              <td>{item.codart}</td>
              <td>{item.descrizione}</td>
              <td>{item.prezzo}</td>
              <td>{item.prezzolistino}</td>
              <td>{Number(item.prezzolistino) * Number(item.prezzo)}</td>
              <td>
                <Button size="xs" color="danger" onClick={() => props.onDelete(item.codart)}>
                  Elimina
                </Button>
              </td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
}

完整修改后的代码 #

import React, { Component } from "react";
import { fileuploadbolla } from "../../services/file";
import Table from "react-bootstrap/Table";
import { Button } from "reactstrap";

function TableArticoli(props) {
  return (
    <Table striped bordered hover editable>
      <thead>
        <tr>
          <th>N° riga</th>
          <th>Codice</th>
          <th>Descrizione</th>
          <th>Prezzo</th>
          <th>Quantita</th>
          <th>Totale</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        {props.list.map((item, i) => {
          return (
            <tr key={item.codart}>
              <td>{i}</td>
              <td>{item.codart}</td>
              <td>{item.descrizione}</td>
              <td>{item.prezzo}</td>
              <td>{item.prezzolistino}</td>
              <td>{Number(item.prezzolistino) * Number(item.prezzo)}</td>
              <td>
                <Button size="xs" color="danger" onClick={() => props.onDelete(item.codart)}>
                  Elimina
                </Button>
              </td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
}

class UploadFileBolla extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image_file: null,
      image_preview: "",
      listarticoli: [],
    };
  }

  handleImagePreview = (e) => {
    let image_as_base64 = URL.createObjectURL(e.target.files[0]);
    let image_as_files = e.target.files[0];

    this.setState({
      image_preview: image_as_base64,
      image_file: image_as_files,
    });
  };

  handleSubmitFile = async () => {
    if (this.state.image_file !== null) {
      let formData = new FormData();
      formData.append("file", this.state.image_file);
      var listarticoli = await fileuploadbolla(formData, "SONEPAR");
      this.setState({ listarticoli: listarticoli.data });
    }
  };

  // 新增删除方法
  handleDeleteItem = (codart) => {
    const updatedList = this.state.listarticoli.filter(item => item.codart !== codart);
    this.setState({ listarticoli: updatedList });
  };

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleImagePreview} />
        <label>Upload file</label>
        <input type="submit" onClick={this.handleSubmitFile} value="Submit" />
        {this.state.listarticoli.length > 0 ? 
          <TableArticoli list={this.state.listarticoli} onDelete={this.handleDeleteItem} /> : 
          <></>
        }
      </div>
    );
  }
}

export default UploadFileBolla;

说明 #

• 利用filter方法生成新数组，避免直接修改原state数组（React要求不可变更新）
• 通过父组件传递的onDelete方法，子组件触发删除动作，父组件更新state后表格自动重新渲染
• 添加key属性是React列表渲染的规范，确保组件更新时的性能和正确性

内容的提问来源于stack exchange，提问作者riki