[英]React.js creating a table with a dynamic amount of rows with an editable column
I am trying to create a react.js table that syncs with a leaflet map. 我正在尝试创建一个与传单映射同步的react.js表。 I have this data and I am able to get the data properly, but I cannot create a table correctly. 我有这些数据,我能够正确获取数据,但我无法正确创建表。 I am able to see the headers because they are hardcoded, but I am not able to see the rows. 我能够看到标题,因为它们是硬编码的,但我无法看到行。 I also have a picture to explain the data at the console.log() points in the code. 我还有一张图片来解释代码中console.log()点的数据。 Here is the code: 这是代码:
/* 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>
);
}
});
Here you can see the console.log(tabledata)
line in full as well as the first object in console.log(rows)
在这里你可以看到完整的console.log(tabledata)
行以及console.log(rows)
的第一个对象console.log(rows)
I would like to see something like the picture below. 我希望看到如下图所示的内容。 Please note I want to Zone column to not be editable input, but the population to be editable: 请注意我想要Zone列不是可编辑的输入,但是要编辑的人口:
<tr Population={zone.population} Zone={zone.name} />
does not seem like a valid React component to me. <tr Population={zone.population} Zone={zone.name} />
对我来说似乎不是一个有效的React组件。 The lowercase <tr>
indicates that this is not a custom component, but represents a standard HTML table row. 小写<tr>
表示这不是自定义组件,而是表示标准HTML表行。 <tr>
elements require <td>
or <th>
elements inside them, for example: <tr>
元素需要<td>
或<th>
元素,例如:
var rows = [];
this.state.zones.forEach(function(zone) {
rows.push(
<tr />
<td><SomePopulationComponent /></td>
<td><SomeZoneComponent /></td>
</tr>
);
}.bind(this));
You could extract this into a custom element: 您可以将其提取到自定义元素中:
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));
Also, don't forget to give elements generated from inside a map
/ foreach
function a key
attribute. 另外,不要忘记给map
/ foreach
函数内部生成的元素一个key
属性。
I have made this dynamic data table with dynamic rows and columns editable 我已经使动态数据表与动态行和列可编辑
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 https://codepen.io/rohanarihant/pen/qmjKpj
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.