Material-ui - TableRow bọc trong thành phần sẽ không hiển thị hộp kiểm

Question

Tôi đang sử dụng Material-ui trong dự án của mình và tôi đang gặp phải sự cố.

Tôi muốn sử dụng thành phần Table để hiển thị danh sách động các mục có hộp kiểm trên mỗi hàng.

Đây là những gì làm cho my trông giống như:

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

Các generateOrderRows() phương pháp:

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; 
} 

Bảng My render tốt và tôi có thể chọn nhiều dòng bằng cách nhấp vào nó mà không có bất kỳ các vấn đề. Nhưng không ai trong số hàng của tôi hiển thị hộp kiểm cho việc lựa chọn, thậm chí bằng cách thông qua đạo cụ phụ huynh để TableRow như thế này:

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> 
    ); 
} 

Nếu tôi kiểm tra của tôi TableRows với Phản ứng Dev Tools, tôi có thể thấy rằng mỗi người trong số họ nhận được prop displayRowCheckbox=true từ TableBody.

Vì vậy, tôi không thể hiểu tại sao hộp kiểm của tôi không hiển thị. Bất kỳ ý tưởng ?

Answer 1

tôi nhấn cùng một vấn đề ... (sử dụng material-ui@0.14.4)

TableBody Rõ ràng nguyên-ui đẩy các thành phần hộp kiểm vào con của nó. Bạn cần lấy nó từ các công cụ TableRow tùy chỉnh của bạn và hiển thị nó một cách rõ ràng trong phương thức render() tùy chỉnh TableRow của bạn.

Lưu ý: Bạn cần cả hai trải đều các phần tử khác vào Bảng và hiển thị hộp kiểm một cách rõ ràng.

// 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