在按钮上添加行按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') 
    } 
} 

所以每次我按一下按钮，新的行应增加，这应该可以尽可能多的行添加到列表越好。这是我想要添加的行。

我意识到我可以在状态中创建一个数组并将它放在那里，但我已经了解到只有数据应该包含在状态中。一些帮助将不胜感激。 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> 

Answer 1

正如马修赫布斯特所说，这是国家的目的。据推测这些行需要显示某种数据。您不应该将HTML/JSX存储在数组中，但应该将用于构造列表的数据存储在数组中。这对React来说很棒。您声明如何基于底层数据呈现用户界面。然后你只是操纵数据。所以首先你需要一个代表列表状态的数组。此外，您不需要声明您的addRow处理程序是由函数返回的。这是一个功能。只需通过排除()括号来调用函数即可。最后，你在数组上返回行。很明显，这是没有数据的所有类型的转储，但是立即清楚在行中需要哪些数据。因此，它应该是这个样子：

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