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

我真的没有任何表格的代码，因为那是我正在努力的一点！

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

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

选中此示例source code / demo

Answer 2

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

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

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

然后将TableBody添加到Table Class。

PS - 上面只是代码片段，有些伪代码。您还需要处理输入字段＆＃39;根据React文档建议正确：https://facebook.github.io/react/docs/forms.html

React - 将空行附加到表

2 个答案: