React - 将空行附加到表中

Question

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

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

快速给出示例的答案将非常感激！

谢谢你的时间

这是整个表格的呈现位置：

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>
        );
    }
}

以下是呈现列标题的代码：

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>
        );
    }
}

我真的没有任何表格主体的代码，因为这是我正在努力解决的问题！

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

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

主要思想是为每一行添加标志，这样您就可以知道每一行的状态，是处于编辑模式还是显示模式

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>);
}

检查此示例源代码/演示