在数据表中的行和复选框上单击

Question

更新后，接下来我将使用材料ui，Table组件和Table是无状态组件，并且还具有构造函数组件EnhancedTable 。 同样在Table组件中，当我遍历数据时，我需要检查选定的props（array）是否具有与data array相同的项目。 通过数据数组映射时应如何检查const isSelected = selected.includes(item) 。 另外，当我单击时，我发现selected.includes不是一个函数

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

表组件

    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

在我看来，您在这里有几处错误（以及几处可能很奇怪的地方）。 因为我不知道您示例中的data结构，所以我无法告诉您在此处检查const isSelected = selected.includes(item)是否正常。 如果data数组中的项目是单个值，则可以使用。 例如，如果您有：

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

和

const selected = [1,2]

您可以按照当前的方式进行检查，这样就可以了。 const isSelected = selected.includes(item)

但是，例如，如果您的数据是一个对象数组，例如：

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

和

const selected = [{id:1}]

然后，您需要像这样检查id值：

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

而且看起来当您在onClick方法中对其进行过滤时，您并未将selected设置为新值，这可能就是为什么您获得selected.includes并非函数错误。 您应该这样做。

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

我不确定为什么您不仅仅拥有一个onSelect方法来处理行的选择和取消选择。 就像是：

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

然后在您的render方法之外：

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

希望能有所帮助。