在这种情况下，我在reactJS中创建了一个Dynamic表，我正在使用constructor，states或objects或使用{{1}编写用于打印行和列表的代码}，但我想使用innerHTMl函数来创建表而不是.map。那么，在innerHTML部分中，如何使用html函数？
如何使用.map函数创建行或列？
.map答案 0 :(得分：0)
您可以将文本添加到像这样的状态的数组
this.state.texts = []
onChange中的input可以是
(value) => this.setState({...state, texts: [...texts, value]})
最后，您使用以下命令更新渲染功能：
{
texts.map(text => (<tr>....Your code....<tr>))
}
答案 1 :(得分：0)
您可以使用lodash循环遍历数字范围，如下所示
在标题
中添加lodash js<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
在构造函数中为创建行和列设置初始状态。然后您创建行和列的函数将如下所示
tableRows(rows_event) {
var id = rows_event.target.id;
if (id == "all_row_range") {
self.setState({
all_row: rows_event.target.value
})
} else {
self.setState({
all_col: rows_event.target.value
})
}
document.getElementById('dynamic_style_table').style.borderWidth = self.table_value;
}
在渲染中你将拥有
{_.range(0, this.state.all_row).map(row => {
return (
<tr key={row}>
{_.range(0, this.state.all_col).map(col => {
return(
<td key={col}>Editable cells</td>
)
})}
</tr>
)})}
下面的完整工作代码
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.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',
all_row: 1,
all_col: 1
}
this.tableHead = this.tableHead.bind(this);
this.table_value = 1;
self = this;
};
tableHead(top_event) {
this.setState({data: top_event.target.value});
}
tableRows(rows_event) {
var id = rows_event.target.id;
if (id == "all_row_range") {
self.setState({
all_row: rows_event.target.value
})
} else {
self.setState({
all_col: rows_event.target.value
})
}
document.getElementById('dynamic_style_table').style.borderWidth = self.table_value;
}
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">
{_.range(0, this.state.all_row).map(row => {
return (
<tr key={row}>
{_.range(0, this.state.all_col).map(col => {
return(
<td key={col}>Editable cells</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
</form>
</div>
);
}
}
ReactDOM.render(<DynamicTable />,document.getElementById('app'));
</script>
</body>
</html>