尝试获取第一列或第四列中的复选框(以选择表中的记录),请尝试使用jscomplete在线工具中的以下代码来运行react js组件。
我试图在数据网格的一栏中获取复选框,当我将列名设为menuCheckBox时,无法进入Datatable组件的if条件。
能帮我吗?我正在尝试该示例,因为我是新来响应js的人。
非常感谢您。
var data = [
{
firstName: "Camden",
lastName: "Hubbard",
city: "San Francisco"
},
{
firstName: "Lillian",
lastName: "Garrison",
city: "San Francisco"
},
{
firstName: "Magee",
lastName: "Mckinney",
city: "Indianapolis"
}
];
var columns = [
{ firstName: "First Name" },
{ lastName: "Last Name" },
{ city: "City" },
{ menuCheckBox: true }
];
class DataTable extends React.Component {
render() {
var self = this;
var order = this.props.cols.map(function(column) {
return Object.keys(column);
});
var width = 100 / this.props.cols.length;
var dataRows = this.props.rows.map(function(row, key) {
return (
<tr key={key}>
{order.map(function(k) {
// tried the below if condition to check if the column is
//menuCheckBox to render the check box but unable to get
if (k === "menuCheckBox") {
return (
<td key={k + "-" + key} width={width + "%"}>
<input type="checkbox" />
</td>
);
}
return (
<td key={k + "-" + key} width={width + "%"}>
{row[k]}
</td>
);
})}
</tr>
);
});
var dataHeaders = order.map(function(k, index) {
return (
<th width={width + "%"} key={k} ref={k}>
<div className="col-xs-11 row header">
{self.props.cols[index][k]}
</div>
</th>
);
});
return (
<table>
<thead>
<tr>{dataHeaders}</tr>
</thead>
<tbody>{dataRows}</tbody>
</table>
);
}
}
class DataGrid extends React.Component {
render() {
return (
<div className="table table-bordered">
<DataTable rows={data} cols={columns} />
</div>
);
}
}
ReactDOM.render(<DataGrid />, mountNode);