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的{{1}}

在this.state.jobData中添加一个字段以标识它是可编辑行还是不可编辑行。假设item

代码为：

isEditable

Answer 2

用于单行编辑

单击按钮后，创建单独的组件，其中包含要添加的行。
添加状态属性，该属性将用于定义“版本行”是否可见。
它应该具有默认状态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（在视觉上） get

用于多个可编辑行

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

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

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

提示3： 通常，当您拥有以render开头并返回在$produto = Produto::find($produtoCriado); $produto->imagens()->save(['url_imagem' => urlImagemExtra]);方法中使用的某些DOM元素的方法时，这表明该方法的内容应移至单独的React组件。

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

扩展运算符-...
箭头功能-=>（也匿名-不在任何地方存储或命名）

Answer 3

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

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

boys = ['Mario', 'Pepe'] function updateUi() { strboy = '<ul id="boysUl">'; boys.forEach(function(boy) { strboy += '<li>' + boy + '</li>'; }); strboy += '</ul>'; document.getElementById("boys").innerHTML = strboy; } function addboy() { var boy = 'Jhon Doe' boys.push(boy); document.getElementById("boysUl").innerHTML += '<li>' + boy + '</li>'; } updateUi()显示行来自<div id="boys"> </div> <button onclick="addboy()">add boy</button>数组。添加行意味着然后添加到数组。有一个问题-您不能变异道具。道具是从父组件传递来的，那么您必须更新父组件中的数据。要处理此问题，您应在父级中使用this.props.jobData.map方法，并将此处理程序作为prop传递（例如jobData，请阅读文档）。

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

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

3 个答案:

用于单行编辑

用于多个可编辑行