handle auf Reihen- und Kontrollkästchen in Datentabelle

Question

aktualisiert I Material ui verwenden nächstes Tabelle Komponente und Tabelle ist zustandslos Komponente, und haben auch I Konstruktor Komponente EnhancedTable. Wenn ich in der Table-Komponente Daten durchwandere, muss ich überprüfen, ob die ausgewählten Requisiten (Array) dasselbe Element wie im Daten-Array haben. Wie überprüfe ich const isSelected = selected.includes(item), wenn ich Daten-Array abbilde. Auch wenn ich auf I-Fehler zu fangen, dass selected.includes ist keine Funktion

unselectSelected={() => onSelect(selected =>{ 
         debugger 
         console.log(selected)})} 

Tabellenkomponente

let defaultCellRenderer = ({item, key}) => 
    item[key] 

const Table = props => { 
    const {data, columns, children, selectable, order, selected, onSelect, onDelete, onSearch, onDuplicate, onSort, search, onUnselectAll} = props 

    return (
     <div> 
      {selectable && 
       <EnhancedTableToolbar 
        numSelected={selected.length} 
        handleSearch={() => onSearch(data)} 
        value={search} 
        // unselectSelected={() => onUnselectAll(selected)} 
        unselectSelected={() => onSelect(selected =>{ 
         debugger 
         console.log(selected)})} 
        deleteSelected={() => onDelete(selected)} 
        duplicateSelected={() => onDuplicate(selected)} 
       /> } 
      <MuiTable > 
       {selectable 
        ? <EnhancedTableHead 
         columns={columns} 
         numSelected={selected.length} 
         order={order} 
         // onSelectAllClick={() => onSelect(Object.keys(new Array(selected.length).fill(0)))} 

         onSelectAllClick={() => onSelect(
          console.log('click') 
         )} 
         onRequestSort={property => event => onSort(event, property)} 
        /> 
        : <TableHead> 
         <TableRow > 
          {columns.map(({label}) => 
           <TableCell> 
            {label} 
           </TableCell>)} 
         </TableRow> 
        </TableHead> 
       } 
       <TableBody> 
        {data.map((item, index) => { 
         // debugger 
         const isSelected = selected.includes(item) 
         debugger 
         return (
          selectable 
           ? <TableRow 
            hover 
            onClick={() => onSelect(isSelected 
             ? selected.filter(x => x != item) 
             : [...selected, item])} 
            role="checkbox" 
            aria-checked={isSelected} 
            tabIndex="-1" 
            key={index} 
            selected={isSelected} 
           > 
            <TableCell checkbox> 
             <Checkbox checked={isSelected}/> 
            </TableCell> 
            {columns.map(({key, cellRenderer, numeric}) => 
             <TableCell key={key} numeric={numeric}> 
              {(cellRenderer || defaultCellRenderer)({item, key})} 
             </TableCell>)} 
           </TableRow> 
           : <TableRow hover> 
            {columns.map(({key, cellRenderer, numeric}) => 
             <TableCell numeric={numeric}> 
              {(cellRenderer || defaultCellRenderer)({item, key})} 
             </TableCell>)} 
           </TableRow>) 
        })} 
       </TableBody> 
      </MuiTable> 
     </div> 
    ) 
} 

EnchancedTable

class EnhancedTable extends Component { 
    state = { 
     selected: [], 
     data, 
     order: { 
      direction: 'asc', 
      by: 'deviceID', 
     }, 
     search: '', 
    } 


    handleRequestSort = (event, property) => { 
     const orderBy = property 
     let order = 'desc' 

     if (this.state.order.by === property && this.state.order.direction === 'desc') { 
      order = 'asc' 
     } 

     const data = this.state.data.sort(
      (a, b) => order === 'desc' ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy], 
     ) 

     this.setState({ data, order }) 
    } 

    deleteSelected =() => { 
     const {data, selected} = this.state 

     this.setState({data: data.filter(item => !selected.includes(item)), selected: []}) 
    } 


    handleSearch = event => { 
     const {data} = this.state 
     let filteredDatas = [] 
     filteredDatas = data.filter(e => { 
      let mathedItems = Object.values(e) 
      let returnedItems 
      mathedItems.forEach(e => { 
       const regex = new RegExp(event.target.value, 'gi') 
       if (typeof e == 'string') 
        returnedItems = e.match(regex) 
      }) 
      return returnedItems 
     }) 
     this.setState({filterData: filteredDatas, search: event.target.value}) 
    } 

    unselectSelected =() => { 
     this.setState({selected: []}) 
    } 

    duplicate =() => { 
     const {data, selected} = this.state 

     this.setState({ 
      // data: data.filter((item, index) => selected.includes(index)).reduce((p, c) => [...p, {...data[index]}], data), 
      data : [...data, ...selected], 
      selected: [], 
     }) 

    } 

handleSelectChange = selected => { 
    this.setState({selected}) 
} 

    render =() => { 

     const {selected, data, search, order} = this.state 

     return (
      <Paper> 
       <Table 
        data={data} 
        selectable 
        columns={columns} 
        order={order} 
        search={search} 
        selected={selected} 
        onSelect={this.handleSelectChange} 
        onDelete= {this.deleteSelected} 
        onSort={this.handleRequestSort} 
        onDuplicate={this.duplicate} 
        onSearch={this.handleSearch} 
        // test unselect 
        onUnselectAll = {this.unselectSelected} 
       /> 
      </Paper>) 
    } 
} 

Answer 1

Es scheint mir, dass Sie haben mehrere Dinge falsch (und ein paar Dinge, die sind vielleicht nur komisch) hier. Weil ich die Struktur von data in Ihrem Beispiel nicht kenne, kann ich Ihnen nicht sagen, ob Ihr Scheck hier für const isSelected = selected.includes(item) richtig funktioniert oder nicht. Wenn ein Element in Ihrem Array data ein einzelner Wert ist, funktioniert dies. Zum Beispiel, wenn Sie hatte:

const data = [ 1,2,3,4 ] 

Und

const selected = [1,2] 

Sie könnten die Kontrolle der Art und Weise tun Sie gerade tun und es würde funktionieren. const isSelected = selected.includes(item)

Aber wenn Ihre Daten ist beispielsweise ein Objektarray wie:

const data = [ {id: 1},{id: 2},{id: 3} ] 

Und

const selected = [{id:1}] 

Dann brauchen Sie würde den id Wert wie folgt zu überprüfen:

const isSelected = selected.some((i) => i.id === item.id) 

Und es sieht auch so aus, als würden Sienicht einstellenzu einem neuen Wert, wenn Sie es in Ihrer OnClick-Methode filtern, die wahrscheinlich ist, warum Sie die selected.includes erhalten, ist keine Funktion Fehler. Sie sollten dies stattdessen tun.

onClick={() => onSelect(isSelected ? selected = selected.filter(x => x != item) : [...selected, item])} 

Ich bin mir nicht sicher, warum Sie beide eine Ihrer onSelect Methode Griff haben nicht nur die Auswahl und deaktivieren einer Zeile. Etwas wie:

onClick={() => this.onSelect()} 

Und dann außerhalb des Render-Methode:

onSelect() { 
    isSelected ? selected = selected.filter(x => x != item) : [...selected, item] 
} 

Hoffnung, das hilft.