我正在尝试创建一个动态表，该表根据以下格式呈现插入的数据

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

Rows 只是一个数组数组，每个数组都是表中的一行。

我将这些数据传递给呈现表格的 React 组件。代码如下：

时间戳

首页 > 解决方案 > 动态不渲染数据

我正在尝试创建一个动态表，该表根据以下格式呈现插入的数据

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

Rows 只是一个数组数组，每个数组都是表中的一行。

我将这些数据传递给呈现表格的 React 组件。代码如下：

html - 动态不渲染数据

我正在尝试创建一个动态表，该表根据以下格式呈现插入的数据

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

Rows 只是一个数组数组，每个数组都是表中的一行。

我将这些数据传递给呈现表格的 React 组件。代码如下：

问题描述

我正在尝试创建一个动态表，该表根据以下格式呈现插入的数据

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

Rows 只是一个数组数组，每个数组都是表中的一行。

我将这些数据传递给呈现表格的 React 组件。代码如下：

export default class StandardTable extends React.Component<Props, State>{
    constructor(props){
        super(props);

        this.state = {
            tableData: this.props.data
        }
    }

    render(){
        return(
            <div>
            <table id="StandardTable">
                <tbody>
                {this.state.tableData.headers.map(function(header){
                    <th>{header}</th>
                })}
                </tbody>
                <tbody>
                {this.state.tableData.rows.map(function(row){
                    <tr>
                        {row.map(function(rowItem){
                            <td>{rowItem}</td>
                        })}
                    </tr>

                })}
                </tbody>
            </table>
                <style jsx>
                    {`
                    #StandardTable{
                        border: 1px solid black;
                    }`}
                </style>
            </div>
        );
    }




}

我能够控制台记录数据对象并且所有数据都在那里。它还遍历地图函数中的数据，因为我可以在控制台中检查，但不幸的是，该表在实践中显示为空白。

通过jquery动态添加的输入字段未提交

我制作了一个表格，如果用户单击 td，它会转换为带有名称和值的输入字段。

字段已成功创建，但未与表单一起提交。

在我的 HTML/PHP 中：

            <tr>
            <form action='form_handlers/assign_query.php' method='POST'>
                    <td >{$row['id']}</td>
                    <td class='editable-td' data-name='name'>{$row['name']}</td>
                    <td class='editable-td' data-name='phone_no'>{$row['phone_no']}</td>
                    <td class='editable-td' data-name='email'>{$row['email']}</td>
                    <td class='editable-td' data-name='type'>{$row['type']}</td>
                    <td class='short-cell editable-td textarea'  data-name='query'>
                        <div class='scrollable'>{$row['query']}</div>
                    </td>
                    <td class='editable-td' data-name='agents'>{$row['agents']}</td>
                    <td class='editable-td'><button type='submit' class='cstm-btn' name='update_query'><i class='fa fa-pencil'></i></button></td>
            </form>
            </tr>

在我的 Js 中：

$('.editable-td').dblclick(function() {
    if($(this).hasClass('enabled')) {
        console.log('already enabled');
    } else {
        $(this).addClass('enabled');
        if($(this).hasClass('textarea')) {
            var text_content = $(this).find('.scrollable').html();
            var name = $(this).data('name');
            console.log(name);
            $(this).html("<textarea name='"+name+"'>"+ text_content +"</textarea>");
        }
        else {
            var text_content = $(this).html();
            var name = $(this).data('name');
            console.log(name);
            $(this).html("<input type='text' name='"+name+"' value='"+ text_content +"' ></input>");
        }
    }
});

在 form_hanlders/assign_query.php 中：

<?php 
print_r($_POST);
?>

由 jQuery 动态添加的输入字段不会显示在 $_POST 数组中。但是，如果我手动输入 jQuery 生成的完全相同的行并将其粘贴到 td 中，它就会被提交。有什么帮助吗？

PS：我已经读过这个，这个和这个，它们没有帮助。

标签： htmlreactjsjsx

解决方案

你可以试试这个，不需要返回，你可以使用箭头功能

        <table id="StandardTable">
            <tbody>
            {this.state.tableData.headers.map((header) => (
                <th>{header}</th>
            ))}
            </tbody>
            <tbody>
            {this.state.tableData.rows.map((row)=>(
                <tr>
                    {row.map((rowItem)=>(
                        <td>{rowItem}</td>
                    ))}
                </tr>

            ))}
            </tbody>
        </table>

希望它会奏效。

推荐阅读