访问react-table-6中子表中的单元格

问题描述

我正在从服务器返回一个具有 QuestionList[x].AnswerList[y] 层次结构的数据集。使用示例文档，我能够正确显示数据，但是当我去编辑列表中的答案时，它会引发错误..

 constructor(props) {
        super(props);
        this.state = {
            banks: [],qbank: [],cellinfo: [],//expanded: {"1":"false"},loading: true,isAnswerDisabled: false,verifyDisabled: false,error: props.bError
        }

        this.renderEditable = this.renderEditable.bind(this);

    }

    renderEditable(cellInfo) {
        return (
            <div
                style={{ backgroundColor: "#fafafa" }}
                contentEditable
                suppressContentEditableWarning
                onBlur={e => {
                    const data = [...this.state.qbank];
                    data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                    this.setState({ data });
                }}
                dangerouslySetInnerHTML={{

                    __html: this.state.qbank[cellInfo.index][cellInfo.column.id]
                }}
            />
        );
    }

    //state is showing as undefined here.. why??
    renderEditableSub(cellInfo) {      
        return (
            <div
                style={{ backgroundColor: "#fafafa" }}
                contentEditable
                suppressContentEditableWarning
                onBlur={e => {
                    const data = [...this.state.cellinfo];
                    data[cellInfo.index].AnswerList[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                    this.setState({ data });
                }}
                dangerouslySetInnerHTML={{
                   // __html: this.state.qbank[cellInfo.index][cellInfo.column.id]
                    __html: cellInfo.value
                }}
            />
        );
    }

renderTable(qbank) {
        return (

            <ReactTable              
                data={qbank}
                columns={[
                    {
                        Header: "Type",accessor: "QuestionTypeAbbrev",Cell: this.renderEditable,width: 75
                    },{
                        Header: "Points",accessor: "PointsAwarded",{
                        Header: "Question",accessor: "QuestionText",minWidth: 225
                    }


                ]}
                defaultPageSize={10}
                // expanded={{ "0": 'false' }}
                className="-striped -highlight"
                //getTrProps={(state,rowInfo,column,instance,expanded) => {
                //    return {
                //        onClick: e => {
                //            console.log(rowInfo);
                //            console.log(rowInfo.viewIndex);
                //            var rowIndex = "{'" + rowInfo.viewIndex + "':'true'}";
                //            console.log(rowIndex);
                //            // this.setState({ expanded: rowIndex });                         
                //            //this.setState({
                //            //    expanded: "{'" + rowInfo.viewIndex + "':'true'}"
                //            //});
                //        }
                //    };
                //}}
                SubComponent={row => {
                    return (
                        <div style={{ padding: "20px" }}>
                            <ReactTable
                                data={qbank[row.index].AnswerList} //where do i get the index for this.
                                columns={[
                                    {
                                        Header: "Is Answer",accessor: "IsAnswer",Cell: this.renderEditableSub,width: 50
                                    },{
                                        Header: "Choice",accessor: "AnswerChoice",minWidth: 175
                                    },{
                                        Header: "Feedback",accessor: "AnswerFeedback",minWidth: 175
                                    }
                                ]}
                                defaultPageSize={3}
                                showPagination={false}
                            />
                        </div>
                    );
                }}
            />
        );
    }

    render() {      
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.renderTable(this.state.qbank);
        return (
            <div>
                <Form.Group>
                    <h1>Question Bank Creator</h1>
                    <Form.Group>
                        <br />
                        <Form.Group className="col-md-12">
                            <FormText className="showError">{this.state.error}</FormText>
                        </Form.Group>
                    </Form.Group>
                    {contents}
                </Form.Group >
            </div>
        );
    }

在renderEditableSub(cellInfo)函数中显示数据时，

__html: this.state.qbank[cellInfo.index][cellInfo.column.id]

抛出了一个错误，所以我将其修改为

 __html: cellInfo.value

哪个有效，但是当我修改子表中的数据时出现此错误：

这是尝试编辑之前的显示：

错误告诉我“this”在行中未定义： const data = [...this.state.cellinfo];在 renderEditableSub 中。我不确定这是为什么？

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）