React - 将空行附加到 table

Question

我目前正在构建一个呈现 table 的应用程序，但在第一个实例中，唯一呈现的是列 headers。我想知道的是我将如何让用户选择添加没有数据的行，然后他们可以编辑这些数据以添加他们想要放入该行的单元格中的数据。 headers 是由具有动态输入量的表单生成的，因此理论上可能会有很多，添加的行也需要反映这一点。我也想尽量避免使用插件。

该应用程序是用 React 构建的，目前我使用的是 flux 架构。

非常感谢能提供示例的快速答案！

感谢您的宝贵时间

这里是整个 table 呈现的地方：

import React from 'react';
import TableHeader from './TableHeader.jsx';
import TableBody from './TableBody.jsx';

export default class Table extends React.Component {
    render() {
        return (
            <table className="table table-striped dali-table">
                <thead><TableHeader /></thead>
                <tbody><TableBody /></tbody>
            </table>
        );
    }
}

下面是呈现列 headers 的代码：

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class TableHeader extends React.Component {

    addHeaders() {
        let headerArray = AppStore.getTable().columns;
        let headerList = headerArray.map((element, index) => {
            return (
                <th key={index} id={element.id} className="text-center">{element.name}</th>
            );
        });
        return headerList;
    }

    render() {
        return (
            <tr>{this.addHeaders()}</tr>
        );
    }
}

而且我真的没有 table 的 body 的任何代码，因为这是我正在努力解决的问题！

好的，我想我正在取得一些进展！感谢你目前的帮助！这是我目前拥有的（稍后我会把它分开，只是想让它先工作！）：

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class Table extends React.Component {
    state = {rows: [], isEditing: false};

    render() {

        let {rows, isEditing} = this.state;

        let headerArray = AppStore.getTable().columns;

        const handleEdit = (row) => {
            this.setState({isEditing: true});
        };

        const handleAddRowClickEvent = () => {
            let rows = this.state.rows;
            rows.push({isNew: true, isEditing: false});
            this.setState({rows: rows});
        };

        return (
            <div>
                <div className="row" id="table-row">
                    <table className="table table-striped">
                        <thead>
                            <tr>{headerArray.map((element, index) => {
                                return (
                                    <th key={index} id={element.id} className="text-center">{element.name}</th>
                                );})}
                            </tr>
                        </thead>
                        <tbody>
                            {rows.map((row, index) => row.isEditing ?
                                <RowForm formKey={index} key={index} /> :
                                <tr key={index}>
                                    {headerArray.map((element, index) => {
                                        return (
                                            <td key={index} id={element.id}></td>
                                        );
                                    })}
                                    <td>
                                        <button onClick={handleEdit(row)}>Edit</button>
                                    </td>
                                </tr>)}
                        </tbody>
                    </table>
                </div>
                <div className="row">
                    <div className="col-xs-12 de-button">
                        <button type="button" className="btn btn-success" onClick={handleAddRowClickEvent}>Add Row</button>
                    </div>
                </div>
            </div>
        );
    }
}

需要有关添加行的帮助不知道将什么推入空行数组！谢谢

Answer 1

~~发布一些代码片段将有助于提供更好的答案~~

因此，要创建动态行，您可以执行以下操作：

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class TableBody extends React.Component {

    addRows() {
        // This gets the number of columns in your header from your backend
        let noOfColumns = AppStore.getColumnSize();

        // loop from 1 to noOfColumns and return:
        return (
              <td><input placeholder='Enter Value'/></td>
          );
    }

    render() {
        return (
            <tr>{this.addRows()}</tr>
        );
    }
}

然后将 Table正文添加到您的 Table Class。

PS - 以上只是代码片段，有点伪代码。您还需要根据 React 文档建议正确处理 'input field'：https://facebook.github.io/react/docs/forms.html

Answer 2

主要思想是为每一行添加标志，以便您了解每一行的状态，是处于编辑模式还是显示模式

render(){
   const handleEdit = (row) => {
      // toggle isEditing flag
    };
    return (<tbody>
    { 
      rows.map((row) => row.isEditing ?
        <RowForm formKey={row.id} key={row.id}/> :
        <tr key={row.id}>
          <td>{row.id}</td>
          <td>{row.name}</td>
            <button onClick={handleEdit(row)}>
             Edit
            </button>
          </td>
        </tr> 
    }
    </tbody>);
}

检查这个例子source code / demo

React - 将空行附加到 table

React - appending an empty row to a table

reactjs

reactjs-flux