Javascript 使用React在表中合并2个或多个单元格
我是新来的。正在尝试创建合并单元格的功能。在普通js中，我会传递td的引用以访问样式或其他属性。但在这里，传递这个是绑定整个类。如何获取特定单元格的引用。我还尝试将单元格和行号的索引传递给merge函数，但click事件没有按预期工作。下面是我正在编写的代码片段。让我们了解一下如何在一个表中合并两个单元格。谢谢Javascript 使用React在表中合并2个或多个单元格,javascript,reactjs,merge,Javascript,Reactjs,Merge,我是新来的。正在尝试创建合并单元格的功能。在普通js中，我会传递td的引用以访问样式或其他属性。但在这里，传递这个是绑定整个类。如何获取特定单元格的引用。我还尝试将单元格和行号的索引传递给merge函数，但click事件没有按预期工作。下面是我正在编写的代码片段。让我们了解一下如何在一个表中合并两个单元格。谢谢 function getTabularStateFromStore(){ return( { row: 0, col: 0, rows:[
function getTabularStateFromStore(){
return(
{
row: 0,
col: 0,
rows:[]
}
)
}
class Table extends React.Component{
constructor(){
super();
this.state = getTabularStateFromStore();
this.onChangeOfRow = this.onChangeOfRow.bind(this);
this.onChangeOfCol = this.onChangeOfCol.bind(this);
this.merge = this.merge.bind(this);
}
render(){
let rows = this.state.rows.map((row,index) => {
var cells = [];
for (var i in row) {
cells.push(<td rowSpan={row[i].rowSpan} colSpan={row[i].colSpan} style={{minWidth: "30px", "padding":"5px"}} key={i} onClick={this.merge}></td>);
}
return <tr key={index}>{cells}</tr>;
});
return(
<div>
<div>
<input type="number" size="4" value={this.state.row} default min="0" onChange={this.onChangeOfRow} />
<input type="number" size="4" value={this.state.col} min="0" onChange={this.onChangeOfCol} />
</div>
<table>
<tbody>
{rows}
</tbody>
</table>
</div>
);
}
merge(cell, row) {
//o.style.backgroundColor = "red";
console.log("cell number: "+cell);
console.log("row number: "+row);
}
onChangeOfRow(e) {
this.updateRowsData(Number(e.target.value), this.state.col)
}
onChangeOfCol(e) {
this.updateRowsData(this.state.row, Number(e.target.value))
}
updateRowsData(row, col){
let rows = []
for(var i = 0; i < row; i++){
let cells = []
for(var j = 0; j < col; j++){
cells.push(Object.assign({value:"", rowSpan: 1, colSpan: 1}));
}
rows.push(cells);
}
this.setState({rows: rows, row: row, col: col})
}
}
export default Table;