добавить и удалить элемент в массиве по нажатию реагировать

Question

Я работаю над простой таблицей с использованием responsejs и ant design.

Мой план - добавить и удалить новый элемент в списке по нажатию кнопки.

Моя проблема в том, что я не знаю, как это сделать.

Я пыталсяследовать этой теме но не повезло.

Надеюсь, вы меня понимаете.

Спасибо.

образец кода

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

Вам нужно использовать реагировать состояние .State хранит данные, когда вы хотите add или remove, обновите это состояние и отреагируйте с повторной визуализацией таблицы.

Я обновил ваш код.При нажатии 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"));