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

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

对于单个可编辑行

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(单一责任原则——代码/方法/组件只做一件事)

检查这个 fiddle 来了解这个想法: 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 语法。如果您还不知道，请学习它，这是您的 friend :)。搜索“ES6 特性教程”。

1. 展开运算符 - ...
2. 箭头函数 - =>(匿名也 - 不存储在任何地方或命名)