Beace Lee

Beace Blog

Written by Beace Lee who lives and works in China building useful things. You should follow him on Twitter

React 动态添加一行数据(包括一行表格或者非表格)

September 01, 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>

浏览器会报这样的错误; alt

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>

        )
    }
})

但是遇到必须要添加一行的时候如何是好,或者更加奇怪但是很常见到的例子:

alt

这样问题不是经常见到,会看到它共同点很多,都是添加一行数据,但是保持在表格的结构里,却有一个非共同点,第一列的数据不发生改变,并且随着一行表格的增多,一直保持垂直居中。

解决方法

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>