如何在表格中点击按钮添加动态行？

Posted 2021-05-02

我不熟悉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>

看起来像

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

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

实际上，我想知道我该怎么做？我尝试在此添加一个静态行，但它没有用。所以，我在问这个问题。

任何帮助对我来说都很棒。

答案

FOR SINGLE EDITABLE ROW

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

单击“添加行”按钮时，将上述属性的状态设置为qazxsw poi qazxsw poi并在包含整个表的组件中实现如下：

true

这样您就不需要修改构成表的原始数据。

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

检查这个小提琴得到的想法： this.setState({ isRowAddingEditorVisible: true });

还有<tbody> {this.state.isRowAddingEditorVisible && <RowAddingEditor />} // <--- HERE {this.props.jobData.map(function (item, key) { return ( <JobTableRow key={key} data={item}> ) })} </tbody> - 这叫做短圈。当https://jsfiddle.net/n5u2wwjg/167786/是{this.state.isRowAddingEditorVisible && <RowAddingEditor />}时，使用$booleanValue && <ReactComponent/>评估为<ReactComponent>的事实，当$booleanValue是true时，将评估为nothing（视觉上说）

FOR MULTIPLE EDITABLE ROWS

$booleanValue

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

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

提示3：通常当你有从false开始的方法并返回你在https://jsfiddle.net/n5u2wwjg/173218/方法中使用的一些DOM元素时，它是信号，应该将此方法的内容移动到单独的React组件。

提示4：在上面的例子中，我使用ES6语法。如果你还不知道它，那就去学习吧，这是你的朋友:)。搜索“ES6功能教程”。

1. 传播运营商 - ......
2. arrow function - =>（也匿名 - 不存储在任何地方或命名）

另一答案

首先，你必须保持get在render，然后this.props.jobData按钮你必须更新state

在OnClick中添加一个字段，以确定它是可编辑的行还是不可编辑的行。让我们说this.state.jobData

代码将是：

item

另一答案

@azrahel给出了关于第一个问题（修改表格视图）的正确答案，下面我正在写下它应该如何运作 - 从'迷你形式'触发动作。

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

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> 数组。添加行表示然后添加到数组。有一个问题 - 你不能改变道具。道具从父组件传递，然后您必须更新父级数据。要处理这个问题，您应该在父级中使用this.props.jobData.map方法并将此处理程序作为prop传递（如jobData，read docs）。

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