我如何在我的反應引導表中添加新行

Question

我使用 React js 創建了下面提到的表格。 當我單擊表格下方的按鈕時，我想在表格中添加一個新行。 我在下面列出了我寫的反應代碼。 我怎樣才能做到這一點？

我的反應代碼

const PPP13 = (props) => {
    return (
        <Jumbotron>

            <p className="btn-group">13- List all owners of 20% or more of the equity of the Applicant</p>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>Owner Name</th>
                    <th>Title</th>
                    <th>Ownership %</th>
                    <th>TIN (EIN, SSN)</th>
                    <th>Address</th>
                </tr>
                </thead>
                <tbody>

                <tr>
                    <td>
                        <FormControl aria-label="DDD"/>
                    </td>
                    <td>
                        <FormControl aria-label="DDD"/>
                    </td>
                    <td>
                        <FormControl aria-label="DDD"/>
                    </td>
                    <td>
                        <FormControl aria-label="DDD"/>
                    </td>
                    <td>
                        <FormControl aria-label="DDD"/>
                    </td>
                </tr>

                </tbody>
            </Table>
        <Button className="btn-group" name="add" value="No">
            Add more owners
        </Button>
        </Jumbotron>
    )
}

Answer 1

好的，這是我的計划：

首先，我們創建一個 state 來保存表的所有數據。 我使用了 object 而不是數組，因為它更容易進行更改處理。 使用 arrays 你總是會做所有這些尷尬的拼接。 當您准備好在其他地方使用它時，您始終可以將 object 解析為一個數組。

然后我們通過映射表 state 中的條目來渲染表的每一行。 請注意，我們還在 map 中編寫了更改處理程序，這意味着我們可以在更改發生時輕松使用 rowId（tableData 鍵）設置新的 state。

最后，我們插入一個按鈕來添加更多行。 這有一個與之關聯的單擊處理程序 ( handleAddRowClick )，它計算我們擁有的行數並使用它來生成新的 rowId。 我們使用新的 rowId 擴展 tableData state 以包含新的defaultRow 。 我在 function 之外定義了defaultRow ，這可以防止在每次渲染時重新聲明它。

import React, { useState } from 'react'
import { Table, Input, Button } from 'reactstrap'

const defautRow = { colA: '', colB: '' }

const IncreasableTable = props => {
  const [tableData, setTableData] = useState({
    row1: { colA: '', colB: '' }
  })

  const handleAddRowClick = () => {
    const extantRowsCount = Object.keys(tableData).length

    setTableData(s => ({
      ...s,
      [`row${extantRowsCount}`]: defautRow
    }))
  }

  return (
    <>
      <Table>
        {
          Object.entries(tableData).map(([rowId, data]) => {
            const handleChange = ({ target: { name, value } }) => {
              setTableData(s => ({
                ...s,
                [rowId]: {
                  ...s[rowId],
                  [name]: value
                }
              }))
            }
            return (
              <tr key={rowId}>
                <td>
                  <Input name="colA" value={data.colA} onChange={handleChange}/>
                  <Input name="colB" value={data.colB} onChange={handleChange}/>
                </td>
              </tr>
            )
          })
        }
      </Table>
      <Button onClick={handleAddRowClick}>Click me to add more rows</Button>
    </>
  )
}

export default IncreasableTable

Answer 2

這是你可以做的。 假設您有一個 Main 組件，它將獲取所有詳細信息。

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 (
      <div>
        <ProductTable onProductTableUpdate={this.handleProductTable.bind(this)} onRowAdd={this.handleAddEvent.bind(this)} products={this.state.products} />
      </div>
    );

  }

}

這包含添加行的代碼。然后為表做這樣的事情。

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return (<ProductRow onProductTableUpdate={onProductTableUpdate} product={product}  key={product.id}/>)
    });
    return (  
      <div>
      <button type="button" onClick={this.props.onRowAdd} className="btn btn-success pull-right">Add</button>
        <table className="table table-bordered">
          <thead>
            <tr>
              <th>Name</th>
              <th>price</th>
              <th>quantity</th>
              <th>category</th>
            </tr>
          </thead>

          <tbody>
            {product}

          </tbody>

        </table>
      </div>
    );

  }

}

現在對於行組件：

class ProductRow extends React.Component {

  render() {

    return (
      <tr className="eachRow">
      <td>
        {this.props.product.id}
      </td>
      <td>
        {this.props.product.price}
      </td>

       <td>
        {this.props.product.qty}
      </td>
       <td>
        {this.props.product.category}
      </td>
      </tr>
    );

  }

}

工作示例：

https://jsfiddle.net/mrAhmedkhan/nvgozjhy/