在按钮上添加行按下反应

Question

我试图在点击事件中向表中添加一行。这是我的组件：

import React, { Component } from 'react';
import PageContent from 'components/PageContent';
import { IBox, IBoxTitle, IBoxContent } from 'components/IBox';
import IBoxTools from 'components/IBoxTools';
import Table from 'components/Table';

export default class SalesChannelsPage extends Component {
    constructor(props) {
        super(props);
        this.addRow = this.addRow.bind(this);
    }

    render() {
        return (
            <PageContent header="Salgskanaler">
                <IBox> 
                    <IBoxTitle>
                        Salgskanaler
                        <IBoxTools icon="fa fa-plus" title="Tilføj salgskanal" handleClick={() => this.addRow()}/>
                    </IBoxTitle>
                    <IBoxContent>
                        <Table>
                            <thead>
                                <tr>
                                    <td className="channel-name">Navn</td>
                                    <td className="channel-description">Beskrivelse</td>
                                    <td className="channel-btn"></td>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </Table>
                    </IBoxContent>
                </IBox>
            </PageContent>
        );
    }

    addRow() {
        console.log('add row')
    }
}

所以每次我单击按钮时，都应该添加一个新行，并且应该可以向列表中添加尽可能多的行。这是我要添加的行。

我意识到我可以在 state 中创建一个数组并将其放在那里，但我知道只有数据应该包含在 state 中。一些帮助将不胜感激。 谢谢

<tr>
    <td className="channel-name">
        <input className="form-control input-sm" type="text" placeholder="Navn..." />
    </td>
    <td className="channel-description">
        <input className="form-control input-sm" type="text" placeholder="Beskrivelse..." />
    </td>
    <td className="channel-btn">
        <div>
            <div className="btn btn-xs btn-danger"><span className="fa fa-times"></span></div>
            <div className="btn btn-xs btn-primary"><span className="fa fa-floppy-o"></span></div>
        </div>
    </td>
</tr>

Answer 1

正如 Matthew Herbst 所说，这就是状态的用途。大概这些行需要显示某种数据。您不应该将 HTML/JSX 存储在数组中，而应该将用于构造列表的数据存储在数组中。这就是 React 的优点。您可以根据基础数据声明 UI 应如何呈现。然后，您只需操作数据。所以首先你需要一个在你的状态下代表列表的数组。此外，您不需要将您的 addRow 处理程序声明为由函数返回。它是一个函数。只需通过排除 () 括号来传递函数而不调用它。最后，您 map 在数组上，返回行。显然，这是一种没有数据的转储，但可以立即清楚地知道行中需要哪些数据。所以它应该看起来像这样：

import React, { Component } from 'react';
import PageContent from 'components/PageContent';
import { IBox, IBoxTitle, IBoxContent } from 'components/IBox';
import IBoxTools from 'components/IBoxTools';
import Table from 'components/Table';

export default class SalesChannelsPage extends Component {
    constructor(props) {
        super(props);
        this.addRow = this.addRow.bind(this);
        this.state = {
          rows: []
        }
    }

    render() {
        return (
            <PageContent header="Salgskanaler">
                <IBox> 
                    <IBoxTitle>
                        Salgskanaler
                        <IBoxTools icon="fa fa-plus" title="Tilføj salgskanal" handleClick={this.addRow}/>
                    </IBoxTitle>
                    <IBoxContent>
                        <Table>
                            <thead>
                                <tr>
                                    <td className="channel-name">Navn</td>
                                    <td className="channel-description">Beskrivelse</td>
                                    <td className="channel-btn"></td>
                                </tr>
                            </thead>
                            <tbody>
                              {this.state.rows.map(row => <tr></tr>)}
                            </tbody>
                        </Table>
                    </IBoxContent>
                </IBox>
            </PageContent>
        );
    }

    addRow() {
        var nextState = this.state;
        nextState.rows.push('placeholder');
        this.setState(nextState);
    }
}

我每次都只是将文本placeholder 推到数组的末尾，因为我不知道你想要什么数据。但这会在每次按下按钮时为您生成空的<tr> 标签。