Materiale-ui - TableRow spostato nel componente non mostra la casella di controllo

Question

Sto utilizzando Materiale-ui nel mio progetto e sto affrontando un problema.

Vorrei utilizzare il componente Table per visualizzare un elenco dinamico di elementi con la casella di controllo su ogni riga.

Questo è ciò che i miei di rendering appare come segue:

<Table multiSelectable={true}> 
    <TableHeader> 
     <TableRow> 
      <TableHeaderColumn>Reference</TableHeaderColumn> 
       .... All others columns ... 
      <TableHeaderColumn>Actions</TableHeaderColumn> 
     </TableRow> 
    </TableHeader> 
    <TableBody displayRowCheckbox={ true }> 
     { this.generateOrderRows() } 
    </TableBody> 
</Table> 

Il metodo generateOrderRows():

generateOrderRows() { 
    var rows = []; 
    if (this.state.orders) { 
     this.state.orders.map(function(order) { 
      rows.push(<OrderListRow key={order._id} order={order} selected={false}/>); 
     }); 
    } 
    if (rows.length == 0) { 
     rows.push(<tr key="1"><td className="text-center" colSpan="9">It seems there is no results... :'(</td></tr>); 
    } 
    return rows; 
} 

mia tavola rendendo bene e sono in grado di selezionare più righe facendo clic su di esso senza alcun i problemi. Ma nessuno dei miei file visualizzare la casella di controllo per la selezione, anche passando puntelli genitore a TableRow in questo modo:

render() { 
    const { order, ...otherProps } = this.props; 
    return(
     <TableRow { ...otherProps }> 
      <TableRowColumn>{ order.reference }</TableRowColumn> 
       ... All others columns ... 
      <TableRowColumn> 
       <RaisedButton label="View" primary={true} linkButton={true} href={ '/order/' + order._id }/> 
      </TableRowColumn> 
     </TableRow> 
    ); 
} 

Se ispezionare la mia TableRows con REACT strumenti di sviluppo, posso vedere che ognuno di loro ricevere il prop displayRowCheckbox=true da TableBody.

Quindi non riesco a capire perché le mie caselle di controllo non vengono visualizzate. Qualche idea ?

Answer 1

mi ha colpito lo stesso problema ... (usando material-ui@0.14.4)

TableBody A quanto pare il materiale-ui spinge la componente casella di controllo nei suoi figli. Devi prenderlo dal tuo oggetto TableRow personalizzato e renderlo esplicitamente nel tuo metodo TableRow render() personalizzato.

Nota: È necessario distribuire altri oggetti in TableRow e rendere esplicitamente la casella di controllo.

// OrderListRow... 
render() { 
    const { order, ...otherProps } = this.props; 
    return(
     <TableRow { ...otherProps }> 
      {otherProps.children[0] /* checkbox passed down from Table-Body*/} 
      <TableRowColumn>{ order.reference }</TableRowColumn> 
       ... All others columns ... 
      <TableRowColumn> 
       <RaisedButton label="View" primary={true} linkButton={true} href={ '/order/' + order._id }/> 
      </TableRowColumn> 
     </TableRow> 
    ); 
} 

https://github.com/callemall/material-ui/issues/1749#issuecomment-217667754 https://github.com/callemall/material-ui/blob/master/src/Table/TableBody.js#L173