javascript - 在按钮上添加行按 React

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')
    }
}

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

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

<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>每次按下按钮时都会为您添加标签。