ReactJS + Material-UI: Wie werden FlatButton und Dialog von Material-UI in jedem TableRow verwendet?

Question

Ich habe eine Material UI <Table>, und in jedem <TableRow> (die dynamisch wiedergegeben wird) für die <TableBody>, würde Ich mag, einen Knopf haben (<FlatButton>) für eine der Spalten. Und sobald der Knopf angeklickt ist, öffnet sich ein <Dialog> und im Inneren wäre ein funktionierender <Tabs>.

So wie kann ich zeige ein <FlatButton> für jede Zeile für eine bestimmte Spalte, und wenn die Taste angeklickt wird, zeigen Sie die <Dialog> zusammen mit einem Arbeits <Tabs> auf der Innenseite als Inhalt? Und lassen Sie die <Dialog> schließen, wenn Sie draußen geklickt haben?

Bisher habe ich die folgende haben, kam aber über die folgenden Themen: das eröffnet, aber es ist langsam und klicken außerhalb des <Dialog> schließt es nicht, die <Tabs> ist sichtbar, aber es funktioniert nicht:

Haupt Tabelle:

import React, { Component } from 'react' 
import { 
    Subheader, 
    Table, 
    TableBody, 
    TableHeader, 
    TableHeaderColumn, 
    TableRow, 
} from 'material-ui' 

import RenderedTableRow from ‘./RenderedTableRow' 

export default class MainTable extends Component { 
    constructor() { 
    super() 
    } 

    render() { 

    return (
     <div> 
     <div> 
     <Subheader>Table</Subheader> 
      <Table 
      multiSelectable={true} 
      > 
      <TableHeader 
       displaySelectAll={true} 
       enableSelectAll={true} 
      > 
       <TableRow> 
       <TableHeaderColumn> 
        Col 1 
       </TableHeaderColumn> 
       <TableHeaderColumn> 
        Col 2 
       </TableHeaderColumn> 
       <TableHeaderColumn> 
        Col 3 
       </TableHeaderColumn> 
       </TableRow> 
      </TableHeader> 
      <TableBody 
       deselectOnClickaway={false} 
       stripedRows 
      > 
       <RenderedTableRow {...this.props}/> 
      </TableBody> 
      </Table> 
     </div> 
     </div> 
    ) 
    } 
} 

Rendered Tabellenzeile:

import React, { Component } from 'react' 

import { Dialog, FlatButton, Tabs, Tab, TableRow, TableRowColumn } from 'material-ui' 
import ContentAdd from 'material-ui/svg-icons/content/add'; 

export default class RenderedTableRow extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     open: false, 
    } 

    this._handleOpen = this._handleOpen.bind(this) 
    this._handleClose = this._handleClose.bind(this) 
    } 

    _handleOpen() { 
    this.setState({ 
     open: true 
    }) 
    } 

    _handleClose() { 
    this.setState({ 
     open: false 
    }) 
    } 

    render() { 
    const { 
     children, 
     ...rest 
    } = this.props 

    const actions = [ 
     <FlatButton 
     label="Cancel" 
     primary={true} 
     onClick={this._handleClose} 
     />, 
    ] 

    return (
     <TableRow {...rest}> 
     {children[0]} 
     <TableRowColumn>Red</TableRowColumn> 
     <TableRowColumn>John, Joshua</TableRowColumn> 
     <TableRowColumn> 
      <FlatButton 
      icon={<ContentAdd/>} 
      onClick={this._handleOpen} 
      /> 
     </TableRowColumn> 

     <Dialog 
      actions={actions} 
      autoScrollBodyContent={true} 
      open={this.state.open} 
      onRequestClose={this._handleClose} 
      modal={false} 
      title='Test' 
     > 
      <Tabs> 
       <Tab label="Item One" > 
       <div> 
        <h2 >Tab One</h2> 
        <p> 
        This is an example tab. 
        </p> 
       </div> 
       </Tab> 

       <Tab label="Item Two" > 
       <div> 
        <h2>Tab Two</h2> 
        <p> 
        This is another example tab. 
        </p> 
       </div> 
       </Tab> 

      </Tabs> 
     </Dialog> 
     </TableRow> 
    ) 
    } 
} 

Vielen Dank im Voraus und akzeptiert/upvote Antwort.

Answer 1

Sie sollten wahrscheinlich nur einen Dialog für die gesamte Tabelle haben, der in Ihrer MainTable Komponente lebt. Dies ist effizienter, da Sie keinen Dialog pro Zeile, sondern nur einen Dialog benötigen.

Damit die Schaltfläche in der RenderedTableRow den Modal öffnen und sagen, welche Zeile ausgewählt ist Sie eine Rückruffunktion MainTable-RenderedTableRow zu überliefern müssen, dass, wenn sie aufgerufen, setzt den Dialog geöffnet und speichert werden, die Reihe war ausgewählt:

Answer 2

Hier ist ein Arbeitsbeispiel unten, sollte es direkt über Kopie Pasta funktionieren.

Die Antwort auf Ihre Frage ist, dass Sie in der Lage sein müssen, zwischen den verschiedenen rows unterscheiden, setzen Sie es auf true wird alle Dialoge angezeigt, oder möglicherweise nur die letzte. Sobald Sie es unterscheiden, sollte die Anzeige der dialog Sie wollen kein Problem sein. Es gibt Möglichkeiten, nur eine dialog zu haben und immer noch diese Arbeit zu haben, aber ich lasse dich herausfinden.

Etwas zu beachten, ist, dass Sie diesen Code auf jeden Fall reinigen können. Erstellen Sie separate Dateien zum Erstellen TableRowsTableColumns usw.

Ich habe es für jetzt auf zwei Spalten verlassen, aber Sie sollten in der Lage sein, den Code zu verstehen. Fühlen Sie sich frei, irgendwelche zusätzlichen Fragen zu stellen.

import React, { Component } from 'react' 

import { Dialog, FlatButton, Tabs, Tab, TableRow, TableRowColumn } from 'material-ui' 
import ContentAdd from 'material-ui/svg-icons/content/add'; 

class MainTable extends Component { 
    static fields = [{tab1:"a", tab2:"b"}, {tab1:"c", tab2:"d"}]; 

    state = { 
    open: false, 
    } 

    handleOpen = (field) =>() => { 
    this.setState({ 
     open: field 
    }) 
    } 

    handleClose =() => { 
    this.setState({ 
     open: false 
    }) 
    } 

    renderRows = (field) => { 
    const { open } = this.state; 

    const actions = [ 
     <FlatButton 
     label="Cancel" 
     primary={true} 
     onTouchTap={this.handleClose} 
     />, 
     <FlatButton 
     label="Submit" 
     primary={true} 
     keyboardFocused={true} 
     onTouchTap={this.handleClose} 
     />, 
    ]; 

    return (<TableRow key={field.tab1}> 
     <TableRowColumn>{field.tab1}</TableRowColumn> 
     <TableRowColumn> 
     <FlatButton 
     icon={<ContentAdd/>} 
     onClick={this.handleOpen(field.tab1)} 
     /> 
     </TableRowColumn> 
     <Dialog 
      title="Dialog With Actions" 
      actions={actions} 
      modal={false} 
      open={open === field.tab1} 
      onRequestClose={this.handleClose} 
     > 
     <Tabs> 
      <Tab label={field.tab1} > 
      <div> 
       <h2>{field.tab1}</h2> 
       <p> 
       This is one tab. 
       </p> 
      </div> 
      </Tab> 

      <Tab label={field.tab2}> 
      <div> 
       <h2>{field.tab2}</h2> 
       <p> 
       This is another example tab. 
       </p> 
      </div> 
      </Tab> 
     </Tabs> 
     </Dialog> 
    </TableRow>); 
    } 

    render() { 
    const rows = MainTable.fields.map(this.renderRows); 
    return (
     <div> 
     {rows} 
     </div> 
    ) 
    } 
} 

export default MainTable; 

Answer 3

Wie ich in den Kommentaren bereits erwähnt, sollten Sie nur eine Dialog Element zusammen mit der Tabellenkomponente haben. Einbetten Dialog in jeder Zeile wird die Leistung beeinträchtigen und ist allgemein eine schlechte Praxis.Hier ist die Lösung für verspottet Registerkarten:

import React, { Component } from 'react'; 
import { find } from 'lodash'; 
import { Dialog, FlatButton, Tabs, Tab, TableRow, TableRowColumn } from 'material-ui'; 
import ContentAdd from 'material-ui/svg-icons/content/add'; 

class MainTable extends Component { 
    // mocked data to show you the example: 
    static fields = [{ 
    id: 1, 
    name: 'John', 
    tabs: [{ 
     header: 'Tab 1 John', 
     content: 'Content of tab 1 for John' 
    }, { 
     header: 'Tab 2 John', 
     content: 'Content of tab 2 for John' 
    }] 
    }, { 
    id: 2, 
    name: 'George', 
    tabs: [{ 
     header: 'Tab 1 George', 
     content: 'Content of tab 1 for George' 
    }, { 
     header: 'Tab 2 George', 
     content: 'Content of tab 2 for George' 
    }] 
    }]; 

    state = { 
    activeRowId: null // we will store the `id` of the active row (opened dialog) 
    }; 

    handleOpen = (rowId) =>() => { 
    this.setState({ 
     activeRowId: rowId // set `id` taken from the row 
    }); 
    }; 

    handleClose =() => { 
    this.setState({ 
     activeRowId: null // reset active `id` 
    }); 
    }; 

    renderRows = (field) => (
    <TableRow key={`row-${field.id}`}> 
     <TableRowColumn>{field.name}</TableRowColumn> 
     <TableRowColumn> 
     <FlatButton 
      icon={<ContentAdd />} 
      onClick={this.handleOpen(field.id)} 
     /> 
     </TableRowColumn> 
    </TableRow> 
); 

    render() { 
    const rows = MainTable.fields.map(this.renderRows); 
    const { activeRowId } = this.state; 
    const actions = [ 
     <FlatButton 
     label="Cancel" 
     primary 
     onTouchTap={this.handleClose} 
     />, 
     <FlatButton 
     label="Submit" 
     primary 
     keyboardFocused 
     onTouchTap={this.handleClose} 
     />, 
    ]; 
    const activeRow = find(MainTable.fields, { id: activeRowId }); // find the data for this active row `id` 
    return (
     <div> 
     {rows} 
     {activeRow ? (
      <Dialog 
      title="Dialog title" 
      actions={actions} 
      modal={false} 
      open 
      onRequestClose={this.handleClose} 
      > 
      <Tabs> 
       {activeRow.tabs.map((tab, index) => (
       <Tab label={tab.header} key={`tab-${index}`}> 
        <div> 
        <h2>{tab.header}</h2> 
        <p>{tab.content}</p> 
        </div> 
       </Tab> 
      ))} 
      </Tabs> 
      </Dialog> 
     ) : null} 
     </div> 
    ); 
    } 
} 

export default MainTable; 

Dies ist, wie es jetzt funktioniert:

Ein paar Bemerkungen:

• Sie diesen Code spalten sollte in kleinere Komponenten, schrieb ich das alles in einem, um es einfach zu testen,
• Denken Sie daran, key Stütze in allen Elementen der Liste zu verwenden (wo Sie über eine Liste iterieren) - beide Zeilen und Tabs (key fehlt in Ihrer Frage).