Hướng dẫn react-bootstrap-table insert row - Reac-bootstrap-bảng chèn hàng

Dưới đây là những gì bạn có thể làm.Giả sử bạn có một thành phần chính sẽ nhận được tất cả các chi tiết.

class Products extends React.Component {

  constructor[props] {
    super[props];

    //  this.state.products = [];
    this.state = {};
    this.state.filterText = "";
    this.state.products = [
      {
        id: 1,
        category: 'Sporting Goods',
        price: '49.99',
        qty: 12,
        name: 'football'
      }, {
        id: 2,
        category: 'Sporting Goods',
        price: '9.99',
        qty: 15,
        name: 'baseball'
      }, {
        id: 3,
        category: 'Sporting Goods',
        price: '29.99',
        qty: 14,
        name: 'basketball'
      }, {
        id: 4,
        category: 'Electronics',
        price: '99.99',
        qty: 34,
        name: 'iPod Touch'
      }, {
        id: 5,
        category: 'Electronics',
        price: '399.99',
        qty: 12,
        name: 'iPhone 5'
      }, {
        id: 6,
        category: 'Electronics',
        price: '199.99',
        qty: 23,
        name: 'nexus 7'
      }
    ];

  }

  handleAddEvent[evt] {
    var id = [+ new Date[] + Math.floor[Math.random[] * 999999]].toString[36];
    var product = {
      id: id,
      name: "empty row",
      price: "mpty row",
      category: "mpty row",
      qty: 0
    }
    this.state.products.push[product];
    this.setState[this.state.products];

  }

  handleProductTable[evt] {
    var item = {
      id: evt.target.id,
      name: evt.target.name,
      value: evt.target.value
    };
var products = this.state.products.slice[];
  var newProducts = products.map[function[product] {

    for [var key in product] {
      if [key == item.name && product.id == item.id] {
        product[key] = item.value;

      }
    }
    return product;
  }];
    this.setState[{products:newProducts}];
  };
  render[] {

    return [
      

        
      
    ];

  }

}

Điều này chứa mã để thêm hàng. Sau đó, bảng làm một cái gì đó như thế này.

class ProductTable extends React.Component {

  render[] {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map[function[product] {
      return []
    }];
    return [  
      

      Add
        
              Name
              price
              quantity
              category
            
            {product}

          
      
    ];

  }

}

Bây giờ đối với các hàng comoponent:

class ProductRow extends React.Component {

  render[] {

    return [
      
      
        {this.props.product.id}
      
      
        {this.props.product.price}
      

       
        {this.props.product.qty}
      
       
        {this.props.product.category}
      
      
    ];

  }

}

Ví dụ làm việc:

//jsfiddle.net/mrAhmedkhan/nvgozjhy/

const rowEvents = {
  onClick: [e, row, rowIndex] => {
    ....
  }
};