Question

我正在使用react-selectable-fast link here。

如何设置/获取图书馆提供的isChecked道具。

我有两个类，Group包含项目列表，GroupItem是包装在由图书馆提供的createSelectable中的可选项目，这是我的代码：

import React, { Component } from 'react';
import { SelectableGroup, SelectAll, DeselectAll, createSelectable } from "react-selectable-fast";

class Group extends Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                { id: '1', name: 'item 1' },
                { id: '2', name: 'item 2' },
                { id: '3', name: 'item 3' },
                { id: '4', name: 'item 4' },
            ],
        }
    }

    componentDidMount() {
        // i want to set the the default checked items here...
        // before adding createSelectable > i've done that by adding
        //                                  checked (boolean) 
        //                                  for each item
    }


    render() {
        return (
            <SelectableGroup
                className="main"
                clickClassName="tick"
                enableDeselect
                allowClickWithoutSelected={true}
            >
                {/* I want to display the total count of selected items here*/}

                <table>
                    <tbody>
                        {
                            this.state.items.map(item=> <GroupItem key={item.id} {...item} />)
                        }
                    </tbody>
                </table>
            </SelectableGroup>
        );
    }
}



// group item component


class GroupItem extends Component {
    render() {

        // props from group selector
        const { name, id } = this.props;
        // props from createSelectable
        const { selectableRef, isSelected, isSelecting } = this.props;

        return (
            <tr ref={selectableRef}>
                <td >
                    {id}
                </td>
                <td >
                    {name}
                </td>
                <td  >
                    {isSelected ? 'Selected' : 'Not Selected'}
                </td>
            </tr>
        );
    }
}

export default createSelectable(GroupItem);

通过用createSelectable包装GroupItem，如何完成设置/获取选中的项目。 set in componentDidMount get in render

Answer 1

我能够通过在真相（项）中添加属性checked并使用SelectableGroup处理程序onSelectionFinish来返回选定组件的数组（参考）

<SelectableGroup ... onSelectionFinish={this.handleSelectionFinish} />

handleSelectionFinish= (obj) => {

        let updatedItems = [...this.state.items];

        for (let i = 0; i < updatedItems.length; i++) {

            let item= updatedItems[i];

            let selectedItem = obj.find(k => k.props.id === item.id)

            item.checked = selectedItem !== undefined;
        }

        this.setState({ items: updateIitems })
    }

React Selectable Fast：如何从可选项目列表中设置和获取选中的项目

1 个答案: