按React按钮添加行

add row on button press React

本文关键字：添加行 按钮 React      更新时间：2023-09-26

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

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中。如果能提供一些帮助，我们将不胜感激。Thx

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

正如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>标签。

相关文章：