React Ant Design 可编辑表格

Question

so I follow up this documentation for creating a editable row; It's a CSS library for React from Ant Design, I am stuck at the following:

• How do I pass the changed row, the newData[index] to an onChange event?
• How do I update a set of row of data to a back-end rest api? I managed to create data using form from Ant Design, but I don't know how to update it using editable row

• Fyi, the back end works perfectly with postman: create, update, delete

• How do I get the id of this code?

  axios.put("/api/product/update/:id"

I tried to replace the id with ${id} , ${index} , ${products[index]} (with template literal) but it doesn't work.

Here are the full code:

import React from 'react';
import axios from 'axios';
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';

const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputType === 'number') {
      return <InputNumber />;
    }
    return <Input />;
  };

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {(form) => {
          const { getFieldDecorator } = form;
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [{
                      required: true,
                      message: `Please Input ${title}!`,
                    }],
                    initialValue: record[dataIndex],
                  })(this.getInput())}
                </FormItem>
              ) : restProps.children}
            </td>
          );
        }}
      </EditableContext.Consumer>
    );
  }
}

class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [], editingKey: '' };
    this.columns = [
      {
        title: 'Product Name',
        dataIndex: 'productname',
        width: '25%',
        editable: true,
      },
      {
        title: 'OS',
        dataIndex: 'os',
        width: '10%',
        editable: true,
      },
      {
        title: 'Category',
        dataIndex: 'category',
        width: '15%',
        editable: true,
      },
      {
        title: 'Model',
        dataIndex: 'model',
        width: '20%',
        editable: true,
      },
      {
        title: 'Serial Number',
        dataIndex: 'serialnumber',
        width: '20%',
        editable: true,
      },
      {
        title: 'Operation',
        dataIndex: 'operation',
        width: '10%',
        render: (text, record) => {
          const editable = this.isEditing(record);
          return (
            <div>
              {editable ? (
                <span>
                  <EditableContext.Consumer>
                    {form => (
                      <a
                        href="javascript:;"
                        onClick={() => this.save(form, record.id)}
                        style={{ marginRight: 8 }}
                      >
                        Save
                      </a>
                    )}
                  </EditableContext.Consumer>
                  <Popconfirm
                    title="Sure to cancel?"
                    onConfirm={() => this.cancel(record.id)}
                  >
                    <a>Cancel</a>
                  </Popconfirm>
                </span>
              ) : (
                  <a onClick={() => this.edit(record.id)}>Edit</a>
                )}
            </div>
          );
        },
      },
    ];
  }

  handleCategoryChange = event => { this.setState({ category: event.target.value }) }
  handleProductNameChange = event => { this.setState({ productname: event.target.value }) }
  handleOsNameChange = event => { this.setState({ os: event.target.value }) }
  handleModelchange = event => { this.setState({ model: event.target.value }) }
  handleSerialnumberChange = event => { this.setState({ serialnumber: event.target.value }) }
  handlePriceChange = event => { this.setState({ price: event.target.value }) }
  handleEquipmentChange = event => { this.setState({ equipment_condition: event.target.value }) }
  handleDetailChange = event => { this.setState({ detail: event.target.value }) }
  handleImageChange = event => { this.setState({ image: event.target.value }) }

  handleSubmit = event => {
    event.preventDefault();
    axios.put(`/api/product/update/:id`,
      {
        category: this.state.category,
        productname: this.state.productname,
        os: this.state.os,
        serialnumber: this.state.serialnumber,
        model: this.state.model,
        price: this.state.price,
        equipment_condition: this.state.equipment_condition,
        detail: this.state.detail,
        image: this.state.image
      })
  }

  componentDidMount() {
    axios.get('/api/product').then(res => {
    this.setState({ products: res.data });
    });
  }

  isEditing = (record) => {
    return record.id === this.state.editingKey;
  };

  edit(id) {
    console.log('products', this.state.products.id);
    // console.log('recordid', record.id);
    this.setState({ editingKey: id });
  }

  save(form, id) {
    console.log('key', id)
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = [...this.state.products];
      const index = newData.findIndex(item => id === item.id); 
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row, });      
        this.setState({ products: newData, editingKey: '' });
        console.log('newData', newData[index]) // data I want to update to API
        console.log('category', newData[index].category) // category

      } else {
        newData.push(this.state.products);
        this.setState({ products: newData, editingKey: '' });
      }
    });
  }

  cancel = () => {
    this.setState({ editingKey: '' });
  };

  render() {
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };

    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.dataIndex === 'serialnumber' ? 'number' : 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });

    return (
      <Table
        rowKey={this.state.id}
        components={components}
        bordered
        dataSource={this.state.products}
        columns={columns}
        rowClassName="editable-row"
      />
    );
  }
}

export default EditableTable;

Update: So I try put axios inside the save method, like so:

save(form, id) {
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = [...this.state.products];
      const index = newData.findIndex(item => id === item.id); 
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row, });      
        this.setState({ products: newData, editingKey: '' });
        console.log('newData', newData[index]) // data I want to update to API
        console.log('index', index) // index adalah index array
        console.log('id', id) // id adalah nomor index dalam tabel database, jangan sampai tertukar

        console.log('category', newData[index].category)
        console.log('productname', newData[index].productname)
        console.log('os', newData[index].os)
        console.log('serialnumber', newData[index].serialnumber)
        console.log('model', newData[index].model)
        console.log('detail', newData[index].detail)
        axios.put(`/api/product/update/:${id}`,
          {
            category: newData[index].category,
            productname: newData[index].productname,
            os: newData[index].os,
            serialnumber: newData[index].serialnumber,
            model: newData[index].model,
            price: newData[index].price,
            equipment_condition: newData[index].equipment_condition,
            detail: newData[index].detail,
            image: newData[index].image
          })

      } else {
        newData.push(this.state.products);
        this.setState({ products: newData, editingKey: '' });
      }
    });

It doesn't update the data on the database.

Answer 1

Someone might still need this, The antd table api .

You can pass the render key in your column with one to three parameters depending on what you need

function(text, record, index) {}

The column will look like this:

const column = [{
                  dataIndex: "firstName",

                  render: (text, record, index) => console.log(text, record, index)
               }]

Answer 2

So there's this weird syntax that I have to remove from the url api. Pay attention to the very minor details of the url; I noticed it from the console log from the back end / node:

axios.put(`/api/product/update/${id}`,
          {
            category: newData[index].category,
            productname: newData[index].productname,
            os: newData[index].os,
            serialnumber: newData[index].serialnumber,
            model: newData[index].model,
            price: newData[index].price,
            equipment_condition: newData[index].equipment_condition,
            detail: newData[index].detail,
            image: newData[index].image
          })