Using CheckboxEditor with react-data-grid

问题

I'm new to React and I'm trying to get the react-data-grid to display a checkbox for one of the columns. I have imported react-data-grid and react-data-grid-addons but I'm not sure how to pass the required props to the CheckboxEditor.

import React, {PropTypes} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import * as identityActions from "../../actions/identityActions";
import * as defectViewActions from "../../actions/defectViewActions";
import MultiSelectBox from "../common/MultiSelectBox";

import ReactDataGrid from "react-data-grid";
import Editors from "react-data-grid-addons";
const {CheckboxEditor} = Editors;

class UserProfilePage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.setReportingArea = this.setReportingArea.bind(this);
        this.rowGetter = this.rowGetter.bind(this);
        this.onCellChanged = this.onCellChanged.bind(this);

        this.state = {
            viewColumns: [],
            summaryColumns: [],
            detailColumns: [],
            commentColumns: [],
            columns: [
                {
                    key: "Name",
                    name: "Column",
                    resizable: false,
                    width: 200,
                    editable: false
                },
                {
                    key: "SummaryView",
                    name: "Summary",
                    resizable: false,
                    width: 80,
                    editor: <CheckboxEditor value={this.props.value} column={null} rowIdx={"1"} />
                },
                {
                    key: "DetailView",
                    name: "Detail",
                    resizable: false,
                    width: 80,
                    editable: true,
                },
                {
                    key: "CommentView",
                    name: "Comment",
                    resizable: false,
                    width: 80,
                    editable: true,
                }
            ]
        };
    }

    componentDidMount() {
        this.props.defectViewActions.loadViewColumns();
    }

    componentWillReceiveProps(nextProps) {
        if ((!this.props.viewColumns || this.props.viewColumns.length === 0) && (nextProps.viewColumns || nextProps.viewColumns.length > 0)) {
            nextProps.viewColumns.forEach(function (col) {
                col.SummaryView = false, col.DetailView = false, col.CommentView = false;

                switch (col.DefaultView) {
                    case 1:
                        col.SummaryView = true;
                        break;
                    case 2:
                        col.DetailView = true;
                        break;
                    case 3:
                        col.CommentView = true;
                        break;
                }
            });

            this.setState({
                viewColumns: nextProps.viewColumns
            })
            ;
        }
    }

    onCellChanged() {
        console.log("Cell updated");
    }

    // -- React Data Grid ----------------------------------------------------------------------------------------------------------
    rowGetter(i) {
        if (this.state.viewColumns.length > 0) {
            return {
                value: this.state.viewColumns[i]
            };
        }
        else {
            return "";
        }
    }

    // -----------------------------------------------------------------------------------------------------------------------------

    setReportingArea(event) {
        this.props.actions.setPreferredReportingArea(event.target.value);
    }

    render() {
        return (
            <div style={{marginTop: '50px'}}>
                <table className="table table-condensed" style={{width: '70%', margin: 'auto'}}>
                    <thead>
                    <tr>
                        <th colSpan="3"><h2>User Profile</h2></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Name:</td>
                        <td>{this.props.user.name}</td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>
                            {this.props.user.Username}
                        </td>
                    </tr>
                    <tr>
                        <td>Preferred Reporting Area:</td>
                        <td>
                            {(this.props.user.ReportingArea) ? (
                                <MultiSelectBox name="ddlReportingArea"
                                                onChange={this.setReportingArea}
                                                value={this.props.user.ReportingAreaId}
                                                options={this.props.user.ReportingAreas.map((ra) => {
                                                    return {id: ra.Id, value: ra.ReportingAreaName};
                                                }).sort((a, b) => {
                                                    return a.value > b.value;
                                                })}/>)
                                : "None Assigned"}
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div className="row" style={{width: '70%', margin: 'auto'}}>
                    <div className="form-horizontal form-group">
                        <label className="col-md-2 control-label">View:</label>
                        <div className="col-md-2">
                            <select className="form-control">
                                <option>Default</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div className="row" style={{width: '70%', margin: 'auto'}}>
                    <div className="col-md-6">
                        <h4>Available Columns</h4>
                        <ReactDataGrid
                            rowHeight={35}
                            minHeight={500}
                            minWidth={450}
                            maxWidth={450}
                            columns={this.state.columns}
                            rowGetter={this.rowGetter}
                            rowsCount={this.state.viewColumns.length}/>
                    </div>

                    <div className="col-md-2">
                        <h4>Default Columns</h4>
                    </div>

                    <div className="col-md-2">
                        <h4>Detail Columns</h4>
                    </div>

                    <div className="col-md-2">
                        <h4>History Columns</h4>
                    </div>
                </div>
            </div>
        );
    }
}

UserProfilePage.propTypes = {
    user: PropTypes.object.isRequired,
    viewColumns: PropTypes.array.isRequired,
    defectViewActions: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired
};

function mapStoreStateToProps(state, ownProps) {
    return {
        user: state.Identity,
        viewColumns: state.ViewColumns
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(identityActions, dispatch),
        defectViewActions: bindActionCreators(defectViewActions, dispatch)
    };
}

export default connect(mapStoreStateToProps, mapDispatchToProps)(UserProfilePage);

From the documentation is presume "value" is returned by the "rowGetter" but how do I pass the "key" and "onCellChange" props to the CheckboxEditor and is "rowIdx" obtained from "this.state.viewColumns".

Any examples or tutorials would be greatly appreciated.

来源：https://stackoverflow.com/questions/44895261/using-checkboxeditor-with-react-data-grid