在按鈕上添加行按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>標籤。