最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - add row on button press React - Stack Overflow

programmeradmin0浏览0评论

im trying to add a row to a table, on a click event. Here is my ponent:

import React, { Component } from 'react';
import PageContent from 'ponents/PageContent';
import { IBox, IBoxTitle, IBoxContent } from 'ponents/IBox';
import IBoxTools from 'ponents/IBoxTools';
import Table from 'ponents/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')
    }
}

So everytime i click the button, a new row should be added, and it should be possible to add as many rows to the list as possible. here is the row i want to add.

i realize that i could make an array in state and just put it there, but i have learned that only the data should be contained in the state. Some help would be much appreciated. 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>

im trying to add a row to a table, on a click event. Here is my ponent:

import React, { Component } from 'react';
import PageContent from 'ponents/PageContent';
import { IBox, IBoxTitle, IBoxContent } from 'ponents/IBox';
import IBoxTools from 'ponents/IBoxTools';
import Table from 'ponents/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')
    }
}

So everytime i click the button, a new row should be added, and it should be possible to add as many rows to the list as possible. here is the row i want to add.

i realize that i could make an array in state and just put it there, but i have learned that only the data should be contained in the state. Some help would be much appreciated. 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>
Share Improve this question edited Apr 21, 2016 at 1:23 randominstanceOfLivingThing 18.8k13 gold badges52 silver badges73 bronze badges asked Apr 21, 2016 at 1:14 PatrickGoethePatrickGoethe 351 gold badge2 silver badges6 bronze badges 2
  • 1 This is a perfect time to use state - the information for each row is data :) – Matthew Herbst Commented Apr 21, 2016 at 1:16
  • You might also consider making a Row ponent depending on how plex your rows are. – Matthew Herbst Commented Apr 21, 2016 at 1:17
Add a ment  | 

1 Answer 1

Reset to default 5

So as Matthew Herbst said, this is what state is for. Presumably those rows need to display some kind of data. You shouldn't be storing the HTML/JSX in the array, but you should be storing the data used to construct the list in the array. This is what is great about React. You declare how the UI should be presented based on the underlying data. Then you just manipulate the data. So first you need an array in your state that represents the list. Also, you don't need to declare your addRow handler as being returned by a function. It is a function. Just pass the function without invoking it by excluding the () parentheses. Finally, you map over the array, returning the rows. Obviously this is all kind of dump without data, but it is immediately clear what data you want in the rows. So it should look something like this:

import React, { Component } from 'react';
import PageContent from 'ponents/PageContent';
import { IBox, IBoxTitle, IBoxContent } from 'ponents/IBox';
import IBoxTools from 'ponents/IBoxTools';
import Table from 'ponents/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);
    }
}

Again I am just pushing the text placeholder to the end of the array each time because I don't know what data you want in there. But this will keep generate empty <tr> tags for you on each push of the button.

发布评论

评论列表(0)

  1. 暂无评论