React 动态添加一行数据(包括一行表格或者非表格)
September 1, 2016
React 在return
中添加table
不可以直接嵌套多个tr
在react
中的return
函数添加表格,代码如下:
<table className="table table-striped table-hover table-bordered"><tr><th>姓名</th><th>手机号</th></tr><tr><td>item1</td><td>item2</td></tr></table>
浏览器会报这样的错误;
react不会把DOM解析成thead和tbody这样的方式,
解决方式为手动添加,完整代码为:
export default React.createClass({render: function() {return(<div><table className="table table-striped table-hover table-bordered"><thead><tr><th>姓名</th><th>手机号</th><th>部门</th><th>角色</th><th>状态</th><th>证件类型</th><th>证件号</th><th>操作</th></tr></thead><tbody><tr><td>item1</td><td>item2</td><td>item3</td><td>item4</td><td>item5</td><td>item6</td><td>item7</td><td><a href="javascript:;">修改</a> | <a href="javascript:;">删除</a></td></tr></tbody></table></div>)}})
但是遇到必须要添加一行的时候如何是好,或者更加奇怪但是很常见到的例子:
这样问题不是经常见到,会看到它共同点很多,都是添加一行数据,但是保持在表格的结构里,却有一个非共同点,第一列的数据不发生改变,并且随着一行表格的增多,一直保持垂直居中。
解决方法
table
中垂直方向合并单元格,除此单元格外,动态添加删除行
做法如下:
- 合并第一个单元格,垂直方向;
- 将其后的单元格全部合并,图片中合并了三个,水平方向
- 根据bootstrap的栅格系统,可以讲其分为三组
代码如下,表示其中一行,放在一个
td
里面,这样react
就不会报语法错误了:
<div className="row row-padding"><div className="col-xs-7 row-height"><div className="col-xs-3 no-padding"><FormField.Number className="form-control"decimalDigits={2}value={model.start}onChange={this.props.onChangeField("start",viewId).bind(this)}disabled/></div>{models.indexOf(model) == 0 ?<span className="col-xs-3 no-padding">元(包含)到</span> :<span className="col-xs-3 no-padding">元(不包含)到</span>}<div className="col-xs-3 no-padding"><FormField.Number className="form-control"decimalDigits={2}value={model.end}onChange={this.props.onChangeField("end",viewId).bind(this)}/></div><span className="col-xs-3 no-padding">元(包含)</span></div><div className="col-xs-2 no-padding"><FormField.Number className="form-control"decimalDigits={2}value={model.addition}onChange={this.props.onChangeField("addition",viewId).bind(this)}/></div><div className="col-xs-3 row-height">{models.indexOf(model) == 0 ?<a href="javascript:;" onClick={this.addRow.bind(this, model)}>增加分级</a> :<a href="javascript:;" onClick={this.removeThis.bind(this, model)}>删除分级</a>}</div></div>