javascript - 单击reactjs添加和删除数组中的项目

Question

我正在使用reactjs和ant design制作一个简单的表格。

我的计划是在单击按钮时在列表中添加和删除新项目。

我的问题是我不知道该怎么做。

我试图遵循这个thread但运气不佳。

希望你能理解我。

谢谢。

sample code

function remove() {
  console.log("remove");
}
function add() {
  console.log("add");
}

const columns = [
  {
    title: "Num",
    dataIndex: "num"
  },
  {
    title: "Name",
    dataIndex: "name"
  },
  {
    title: "Age",
    dataIndex: "age"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];
const data = [
  {
    key: "1",
    num: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    num: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    num: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  }
];

<Table pagination={false} columns={columns} dataSource={data} />
    <Button type="primary" onClick={add}>
      add
    </Button>
    <Button type="danger" onClick={remove}>
      remove
    </Button>

Answer 1

您需要使用react state 。状态保存数据，当您想要添加或删除时，更新此状态并通过重新渲染表格使用react。

我已经更新了您的代码。单击add 会添加一个新的随机行。单击“删除”后，最后一行将被删除。

CodeSandbox

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Button } from "antd";

function remove() {
  console.log("remove");
}
const columns = [
  {
    title: "Num",
    dataIndex: "num"
  },
  {
    title: "Name",
    dataIndex: "name"
  },
  {
    title: "Age",
    dataIndex: "age"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];
let data = [
  {
    key: "1",
    num: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    num: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    num: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  }
];

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data
    };
  }
  add = () => {
    var row = {
      key: "99",
      num: 99,
      name: "I am New",
      age: 32,
      address: "New Address"
    };
    var newStateArray = [...this.state.data];
    newStateArray.push(row);
    this.setState(() => {
      return {
        data: newStateArray
      };
    });
  }

remove = () => {
  var newStateArray = [...this.state.data];
  if(newStateArray.length > 1) {
    newStateArray.pop();
  }
  this.setState(() => {
    return {
      data: newStateArray
    };
  });
}
  render() {
    return (
      <div>
        <Table
          pagination={false}
          columns={columns}
          dataSource={this.state.data}
        />
        <Button type="primary" onClick={this.add}>
          add
        </Button>
        <Button type="danger" onClick={this.remove}>
          remove
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<MyTable />, document.getElementById("container"));