javascript - 如何使用react获取html格式的表格？

Question

我在 jsx 页面上有以下语义-ui-react 表

<Table id='myTable' celled selectable sortable headerRow={['Id', 'Name']} renderBodyRow={this.renderBody} tableData={list}  />

我需要在调用方法中将此表放入 html 字符串

getHtmlTable() {
    var html = document.getElementById('myTable');
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

并在post方法中获取:

[HttpPost("html")]
public void GetData(string html)
{        
}

如何获取 html 格式的表格？我在 jQuery 中找到了 .html() 函数，但不明白如何使用它。我尝试过:

<div className="htmlData">
    <Table id='myTable' celled selectable sortable headerRow={['Id', 'Name']} renderBodyRow={this.renderBody} tableData={list}  />
</div>

getHtmlTable() {
    var html = $('htmlData').html();
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

但是这不起作用。有人可以帮忙吗？

Answer 1

确保您的代码包装在 componentDidMount 内。 componentDidMount 在组件安装后立即调用。

componentDidMount

componentDidMount(){
  var html = document.getElementById('myTable').outerHTML
  this.getHtmlTable(html)
}
getHtmlTable(html) {
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}