如何在表中单击按钮时添加动态行？

Question

我也是React Js的新手。 在这里，我有一张桌子，像

<div className="col-xs-12 " id="scrollableTable">
                        <Table striped condensed hover id="jobData">
                            <thead style={backgrounColour}>
                            <tr>
                                <th className='serial-column'>Sr.No.</th>
                                <th className='company-column'>Company Name</th>
                                <th className='technology-column'>Technology</th>
                                <th className='job-column'>Job Title</th>
                                <th className='total-score-column'>Total Score</th>
                                <th className='average-score-column'>Average Score</th>
                            </tr>
                            </thead>
                            <tbody>{this.props.jobData.map(function (item, key) {
                                return (
                                    <tr key={key}>
                                        <td><b style={compName}>{item.id}</b></td>
                                        <td><b style={compName}>{item.attributes.companyName}</b></td>
                                        <td>Xamarian Developer</td>
                                        <td>{item.attributes.name}</td>
                                        <td><b style={compName}>30</b></td>
                                        <td><b style={compName}>30</b></td>
                                    </tr>
                                )
                            })}</tbody>
                        </Table>
                    </div>

我确实有一个像

<button className = "btn btn-default">Add Row </button>

看起来像

现在，我想要的是单击此按钮，

这应该作为此表的第一行添加。

实际上，我想知道如何执行此操作？ 我尝试通过在其中添加一个静态行来解决问题，但没有成功。 所以，我在问这个问题。

任何帮助对我来说都是很大的。

Answer 1

首先，您必须将this.props.jobData保持在state ，然后必须单击按钮的OnClick来更新this.state.jobData

在item添加字段以标识它是可编辑行还是不可编辑行。 假设isEditable

该代码将是：

<tbody>{this.state.jobData.map(function (item, key) {
                           if (!item.isEditable) {
                                return (
                                    <tr key={key}>
                                        <td><b style={compName}>{item.id}</b></td>
                                        <td><b style={compName}>{item.attributes.companyName}</b></td>
                                        <td>Xamarian Developer</td>
                                        <td>{item.attributes.name}</td>
                                        <td><b style={compName}>30</b></td>
                                        <td><b style={compName}>30</b></td>
                                    </tr>
                                )
                           } else {
                                return (
                                   //Add your editable row here
                                )
                           }

                            })}</tbody>

Answer 2

单行编辑

1. 单击按钮后，创建单独的组件，其中包含要添加的行。
2. 添加状态属性，该属性将用于定义“版本行”是否可见。
3. 它应该具有默认状态false （因为它在初始渲染时不可见） this.state = { isRowAddingEditorVisible: false }

单击“添加行”按钮时，将上述属性的状态设置为true this.setState({ isRowAddingEditorVisible: true }); 并在保存整个表的组件中实现它，如下所示：

<tbody>
{this.state.isRowAddingEditorVisible && <RowAddingEditor />}     // <--- HERE
{this.props.jobData.map(function (item, key) {
     return (
       <JobTableRow key={key} data={item}>
     )
 })}
</tbody>

这样，您无需修改​​构成表的原始数据。

JobTableRow将当前拥有的所有内容保存为行。 它提供了更好的分离性，可读性，使您更接近SRP（单一职责原则-代码/方法/组件仅做一件事）

检查这个小提琴以获得想法： https : //jsfiddle.net/n5u2wwjg/167786/

也{this.state.isRowAddingEditorVisible && <RowAddingEditor />} -这称为短循环。 现在用的是事实， $booleanValue && <ReactComponent/>将评估为<ReactComponent>当$booleanValue是true ，实际等于nothing （视觉而言）当$booleanValue是false

用于多个可编辑行

https://jsfiddle.net/n5u2wwjg/173218/

提示1：我使用Math.random（）获取行的唯一ID。 这只是简单，快速的示例解决方案，因此不应在生产代码中使用这种形式。 通常，唯一的ID生成器是基于Math.random（）的，但是带有一些附加的代码，会随机化更多位。

提示2：请记住，在将行发布到服务器时，还需要从状态中删除其ID。

提示3：通常，当您具有以get开头并返回在render方法中使用的某些DOM元素的方法时，这表明该方法的内容应移至单独的React组件。

提示4：在上面的示例中，我使用ES6语法。 如果您还不了解它，那是您的朋友:)。 搜索“ ES6功能教程”。

1. 点差算子-...
2. 箭头功能-=>（也匿名-不在任何位置存储或命名）

Answer 3

@azrahel在第一个问题（修改表视图）方面给出了正确的答案， 下面我在写它稍后应如何工作 -从“迷你表单”触发的操作。

简而言之-它是数据驱动的。 更新数据，视图将被更新。

this.props.jobData.map显示行来自this.props.jobData数组。 添加行意味着然后添加到数组。 有一个问题-您不能变异道具。 道具是从父组件传递来的，那么您必须更新父组件中的数据。 要处理此问题，您应在父级中具有addJob方法，并将此处理程序作为prop传递（例如jobData，请阅读docs）。

但是... 可能是从server获取的该数组不是本地数据 。 如果要在服务器上更新此数据（推送到数据库，供其他用户使用），则无需将数据发布到服务器（它将数据存储在数据库中）。 在最简单的情况下，发布请求将返回新的，更新的数组。 传递给组件的更新数据应使用新数组（带有新行）呈现组件。 “编辑行”是否仍然可见取决于您。