0
在这种情况下我已经创造了reactJS动态表，我使用constructor，states或objects或编写的代码打印使用innerHTMl行和列的表格，但我想用.map函数来创建一个表，而不是innerHTML。那么，在html部分我该如何使用.map函数？如何使用.map函数代替innerHTML（）做出反应？
如何使用.map函数创建行或列？
<!DOCTYPE html>
<html>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://getbootstrap.com/dist/js/bootstrap.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
<title>My First React File</title>
<style>
.level1 td, .label1 tr {
border: 1px solid black;
}
.level2 td, .label2 tr {
border: 2px solid black;
}
.level3 td , .label3 tr {
border: 3px solid black;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
class DynamicTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Dynamic Table',
tblborder :'level1'
}
this.tableHead = this.tableHead.bind(this);
this.all_row = 1;
this.all_col = 1;
this.dTable = "";
this.index_count = 0;
this.table_value = 1;
self = this;
};
tableHead(top_event) {
this.setState({data: top_event.target.value});
}
tableRows(rows_event) {
let text = "";
let create_rows = 0;
var id = rows_event.target.id;
if (id == "all_row_range") {
self.all_row = rows_event.target.value;
} else {
self.all_col = rows_event.target.value;
}
let dTable= document.getElementById('dynamic_tbody');
while(create_rows < self.all_row) {
text += '<tr>';
for(let i = 0; i < self.all_col; i++){
text += '<td>Editable cells</td>';
}
text += '</tr>';
create_rows = create_rows + 1;
}
ReactDOM.findDOMNode(dTable).innerHTML = text;
document.getElementById('dynamic_style_table').style.borderWidth = self.table_value;
self.index_count = 0;
}
tableBold(bold_value) {
let v = bold_value.target.value;
v = "level" + v;
self.setState({tblborder : v})
}
tableColumnEdit(edit_event) {
let edit_value = document.getElementById("edit_cell_checkbox").checked;
let tbody = document.getElementById("dynamic_tbody");
let tr_tag = tbody.getElementsByTagName("tr");
if(edit_value == true) {
for(let td_index = 0; td_index < tr_tag.length; td_index++) {
tr_tag[td_index].contentEditable = "true";
}
} else {
for(let td_index = 0; td_index < tr_tag.length; td_index++) {
tr_tag[td_index].contentEditable = "false";
}
}
}
render() {
const style = {
area_Left: {
float: 'left',
height: '397px',
width: '45%',
padding: '20px 20px',
lineHeight: '4',
background: '#21618C',
margin: '15px'
},
area_Right: {
float: 'right',
background: '#F5B7B1',
color: '#333',
height: '398px',
width: '45%',
padding: '20px 20px',
margin: '15px'
},
font_Size: {
font_Size: '13',
font: 'cursive',
fontWeight: 'bold',
color: '#333'
},
first_input: {
width: '162px',
height: '25px',
position: 'relative',
left: '49%'
},
rows_Border: {
border: "1px solid #333",
margin: '2px 0 0 2px',
width: '450px',
height: '70px'
},
text_Box: {
margin: '2px 0 0 0'
},
select_box: {
position: 'relative',
left: '34%',
width: '162px',
height: '25px'
},
position: {
position: 'relative',
left: '28%',
width: '89px',
height: '22px'
},
meter_first: {
position: 'relative',
left: '16%',
background: 'red'
},
meter_second: {
position: 'relative',
left: '11%'
}
}
return (
<div>
<form action="#" method="post">
<div class="container">
<div style={style.area_Left}>
<div class="form-group" style={style.text_Box}>
<label htmlFor="first_text" style={style.font_Size}>Table name</label>
<input class="form-control" style={style.first_input } type="text" name="first_text" id="first_text" value = {this.state.data} onChange = {this.tableHead}/>
</div>
<div class="form-group">
<label htmlFor="all_row_range" style={style.font_Size}>Range for row increment/decrement </label>
<input class="form-control" style={style.meter_first} type="range" name="all_row_range" id="all_row_range" min="1" max="5" onChange = {this.tableRows} defaultValue="0"/>
</div>
<div class="form-group">
<label htmlFor="all_col_range" style={style.font_Size}>Range for column increment/decrement </label>
<input class="form-control" style={style.meter_second} type="range" name="all_col_range" id="all_col_range" defaultValue="0" min="1" max="5" onChange = {this.tableRows}/>
</div>
<div class="form-group">
<label htmlFor="bold_select_box" style={style.font_Size}>Boldness of border cell</label>
<select class="form-control" style={style.select_box} name="bold_select_box" id="bold_select_box" onChange = {this.tableBold}>
<option value="1">Level-1</option>
<option value="2">Level-2</option>
<option value="3">Level-3</option>
</select>
</div>
<div>
<label htmlFor="edit_cell_checkbox" style={style.font_Size}>Edit on cell of the table</label>
<input type="checkbox" style={style.position} name="edit_cell_checkbox" id="edit_cell_checkbox" value="editing" onClick = {this.tableColumnEdit}/>
</div>
</div>
<div style={style.area_Right}>
<table style={style.rows_Border} id="dynamic_style_table" className={this.state.tblborder}>
<caption><h3>{this.state.data}</h3></caption>
<tbody id="dynamic_tbody">
</tbody>
</table>
</div>
</div>
</form>
</div>
);
}
}
React.render(<DynamicTable />,document.getElementById('app'));
</script>
</body>
</html>