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

我是新的反应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>

高级专员：没有。
公司名称
技术
职位名称
总分
平均分
{this.props.jobData.map（函数（项，键）{
返回(
{item.id}
{item.attributes.companyName}
Xamarian开发者
{item.attributes.name}
30
30
)
})}

我有一个按钮，就像

<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>

添加行

看起来像

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

应将其添加为此表中的第一行

事实上，我想知道我该怎么做？我尝试在其中添加一个静态行，但没有成功。所以，我要问这个问题

---

任何帮助对我都是非常好的。

首先你必须将

this.props.jobData

保持在

状态

，然后

点击按钮，你必须更新
this.state.jobData

在
项中添加一个字段
，以确定它是可编辑行还是不可编辑行。比如说
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.state.jobData.map（函数（项，键）{
如果（！item.isEditable）{
返回(
{item.id}
{item.attributes.companyName}
Xamarian开发者
{item.attributes.name}
30
30
)
}否则{
返回(
//在此处添加可编辑行
)
}
})}
用于单个可编辑行
单击按钮后，创建包含要添加的行的单独组件
添加将用于定义“编辑行”是否可见的状态属性
它应该具有默认状态
false
（因为它在初始渲染时不应可见）

此.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>


{this.state.isRowAddingEditorVisible&&}//（也为匿名-未存储在任何位置或命名）
@azrahel对第一个问题（修改表视图）给出了正确的答案，下面我写的是关于它以后应该如何工作的内容-从“迷你表单”触发的操作

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

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

但是可能此数组不是本地数据，是从服务器获取的。若你们想在服务器上更新这个（推送到数据库，以便其他人可以使用），那个么你们需要将数据发布到服务器上（它将把数据存储在数据库中）。在最简单的场景中，post请求将返回新的、更新的数组。传递给组件的更新数据应使用新数组（新行）呈现组件。“编辑行”是否仍然可见取决于您。
很抱歉，他不需要将该数据保持在状态。没有必要。为了一行（EditionRow）而通过扩展此
isEditable
字段来修改整个数据集实际上也是一个巨大的过度消耗。此外，数据可能来自服务器，可能无法直接保存在应用程序中的任何位置，因此为了非数据行的可视化而扩展它不仅是过度消耗，但是，如果不为了这个目的而保存数据或修改数据库中的数据结构，也可能是不可能的——这两个想法都不好。我不确定他的要求，根据我的回答，他可以添加多个可编辑行并编辑现有行。无论如何，让他决定是的，我不需要将数据保存在state中，实际上，表中包含来自服务器的数据，但是一个新行，或者你可以说一个div，它将出现在表的第一行之前。从技术上讲，你可以改变父组件的状态值（就设计而言，这不是一个好主意，但情况不同）和作为道具传递。除了构成表的数据之外，您还可以传递将修改该数据的回调方法-这里没有问题。您甚至自己编写了它。不过，这不是一个好的设计。将您建议的数据发送到服务器，只是为了呈现这一行，这是一个非常糟糕的想法。而且这不是标准做法（哪一种更好）所以真的没必要这样。问题是关于“添加动态行”，而不是ab