React.js 创建具有动态行数和可编辑列的表

Posted 2023-02-22

【中文标题】React.js 创建具有动态行数和可编辑列的表

【英文标题】：React.js creating a table with a dynamic amount of rows with an editable column

【发布时间】：2015-07-28 15:43:57

【问题描述】：

我正在尝试创建一个与传单地图同步的 react.js 表。我有这些数据并且能够正确获取数据，但我无法正确创建表。我能够看到标题，因为它们是硬编码的，但我看不到行。我还有一张图来解释代码中console.log()点的数据。代码如下：

/* Table React Component */
var TABLE_CONFIG = 
  sort:  column: "Zone", order: "desc" ,
  columns: 
    col1:  name: "Zone", filterText: "", defaultSortOrder: "desc" ,
    col2:  name: "Population", filterText: "", defaultSortOrder: "desc" 
  
;

var Table = React.createClass(
  getInitialState: function() 
    var tabledata = [];
    var length = _.size(testJSON.zones);
    for(i = 0; i < length; i++) 

      var name = _.keys(testJSON.zones)[i];

      var population = testJSON.zones[name].population.value;
      if(name == "default") 
        population = testJSON.zones[name].population.default.value;
      

      tabledata[i] = name, population;
    
    console.log(tabledata);
    return zones: tabledata;
  ,

  render: function() 
    var rows = [];
    this.state.zones.forEach(function(zone) 
        rows.push(<tr Population=zone.population Zone=zone.name />);
    .bind(this));
    console.log(rows);
    return (
        <table>
            <thead>
                <tr>
                    <th>Zone</th>
                    <th>Population</th>
                </tr>
            </thead>
            <tbody>rows</tbody>
        </table>
      );
  
);

在这里您可以看到完整的console.log(tabledata) 行以及console.log(rows) 中的第一个对象

我希望看到如下图所示的内容。请注意，我希望区域列不可编辑输入，但人口可编辑：

【问题讨论】：

这是一个相当简洁的例子，在 React 中创建一个简单的表格组件。它帮助了我。 gist.github.com/ChaseWest/1935d08b156ae04b85d2

【参考方案1】：

我已经使这个动态数据表具有可编辑的动态行和列

class App extends React.Component 

    constructor(props)
        super(props);

        this.state = 
            data: [
                'id':1,1:'',2:'Class1',3:'Class2',4:'Class3',5:'Class4',6:'Class5',7:'Class6',
                'id':2,1:'MONDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6',
                'id':3,1:'TUESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6',
                'id':4,1:'WEDNESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6',
                'id':5,1:'THURSDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6',
                'id':6,1:'FRIDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'
            ],
            errorInput:''
        ;

        this.submitStepSignupForm = this.submitStepSignupForm.bind(this);
        this.appendColumn = this.appendColumn.bind(this);
        // this.editColumn = this.editColumn.bind(this);
    

    render()

        let tableStyle = 
            align:"center"
        ;

        let list = this.state.data.map(p =>
            return (
                <tr className="grey2" key=p.id>
                    Object.keys(p).filter(k => k !== 'id').map(k => 
                        return (
                            <td className="grey1" key=p.id + '' + k>
                                <div suppressContentEditableWarning="true" contentEditable="true" value=k onInput=this.editColumn.bind(this,p,k)>
                                    p[k]
                                </div>
                            </td>
                        );
                    )
                </tr>
            );
        );

        return (
            <fieldset className="step-4">
                <div className="heading">
                    <h3>Tell us about your schedule</h3>
                    <p>Dynamic Data Table by Rohan Arihant</p>
                </div>
                <div className="schedule padd-lr">
                    <table cellSpacing="3" id="mytable" style=tableStyle>
                        <tbody>list</tbody>
                    </table>
                </div>
           </fieldset>
        );
    

https://codepen.io/rohanarihant/pen/qmjKpj

【讨论】：

老兄！这很棒！正是我想要的。另外，您能解释一下suppressContentEditableWarning="true" contentEditable="true" 标签以及您的editColumns()

合法上帝保佑人。唯一使用纯 react + html 并且似乎有效的帖子。而且我相信这些都是标签的一部分，他们所说的字面意思是：编辑内容。

【参考方案2】：

<tr Population=zone.population Zone=zone.name /> 对我来说似乎不是一个有效的 React 组件。小写的<tr> 表示这不是自定义组件，而是代表标准的HTML 表格行。 <tr> 元素需要在其中包含 <td> 或 <th> 元素，例如：

var rows = [];
this.state.zones.forEach(function(zone) 
    rows.push(
      <tr />
        <td><SomePopulationComponent /></td>
        <td><SomeZoneComponent /></td>
      </tr>
    );
.bind(this));

您可以将其提取到自定义元素中：

var CustomRow = React.createClass(
    render: function() 
        return (
            <tr>
                <td>this.props.Population</td>
                <td>this.props.Zone</td>
            </tr>
        );
    
);

// ...

var rows = [];
this.state.zones.forEach(function(zone) 
    rows.push(<CustomRow Population=zone.population Zone=zone.name />);
.bind(this));

另外，不要忘记为从 map/foreach 函数内部生成的元素赋予 key 属性。