在本地配置xeditable

Question

我试图实现内联编辑我的表在我的angular/react项目。我不能完全理解我应该如何使我的变化在我的组件状态定义的本地数组??我没有使用任何数据库或服务器…所有的例子都是db。有人能帮忙吗?这是我的组件。

var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false
        };
    },
    handleAddElement(element) {
        if(this.state.globalChecked)
        {
            element.selected = this.state.globalChecked;
        }
        this.state.items.push(element);
        this.setState(this.state.items);
    },
    handleEditElement(element,index){
        if(this.state.items[index].selected)
        {
            element.selected = this.state.items[index].selected;
        }
        this.state.items[index] = element;
        this.setState(this.state.items);
    },
    handleChecked : function (i) {
        this.state.items[i].selected =  !this.state.items[i].selected;
        this.setState(this.state.items);
    },
    checkAll:function () {
        this.state.globalChecked = !this.state.globalChecked;
        this.setState({globalChecked:this.state.globalChecked});
        var ifChecked = this.state.globalChecked;
        this.state.items = this.state.items.map(function(element) {
            return { start: element.start,end:element.end,hours:element.hours,selected: ifChecked };
        });
        this.setState({items:this.state.items});
    },
    remove : function () {
        for(var i = 0;i<this.state.items.length;i++)
        {
            if(this.state.items[i].selected)
            {
               this.state.items.splice(i,1);
                i--;
            }
        }
        this.setState(this.state.items);
    },
    setResult:function () {
        this.state.items.length = 0;
        if(this.state.globalChecked)
        {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours,selected:true};
            }
            this.setState(this.state.items);
        }
        else {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours};
            }
            this.setState(this.state.items);
        }
    },
    render: function(){
        var that = this;
        $(document).ready(function(that) {
            $.fn.editable.defaults.mode = 'inline';
            $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
                '<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>';
            var wtf = $('#hoursInput').editable({
            type:'number',
                url: '/post',
                inputclass: 'some_class',
                pk:$("#hoursInput")[0].attributes[1].value,
                success: function(response, newValue) {
                    ////HOW SHOULD I ACCESS MY PK ? IS THERE A BETTER WAY TO ASSIGN PK VALUE THAN $("#hoursInput")[0].attributes[1].value
                    //HOW SHOULD I MADE MY CHANGES IN THIS.STATE.ITEMS ?? CURRENTLY I DONT HAVE ACCESS TO IT!
                }
            });
        });
        $(document).on('click','.editable-submit',function(e,editable,params,data) {
            // this.state.items[$("#hoursInput")[0].attributes[1].value].hours = newValue;
            // console.log(this.state.items[$("#hoursInput")[0].attributes[1].value]);
            // this.setState(this.state.items);
        }.bind(this));
        var arrayItems =  this.state.items.map(function (item,i) {
            return (
                <tr key={i}>
                    <td><input type="checkbox"  checked={item.selected} onClick={this.handleChecked.bind(this,i)}/></td>
                    <td><FormattedDate value={item.start}/></td>
                    <td><FormattedDate value={item.end}/></td>
                    <td id="hoursInput" data-param={i} className={i}>{item.hours}</td>
                    <td>
                        <ModalEditElement items={this.state.items} onEditElement={this.handleEditElement} index={i} checked={this.state.globalChecked} ></ModalEditElement>
                    </td>
                </tr>
            );
        }.bind(this));
        return (
            <table className="myTable">
                <thead>
                <tr>
                    <th><input type="checkbox" onClick={this.checkAll}/></th>
                    <th>Start Date:</th>
                    <th>End Date:</th>
                    <th id="hoursField">Hours:</th>
                    <th id="editField">Edit:</th>
                </tr>
                </thead>
                <tbody>
                {arrayItems}
                </tbody>
                <tfoot>
                <tr>
                    <td colSpan="4">
                        <span className="addButtonDisplay"><ModalAddElement onAddElement={this.handleAddElement} items={this.state.items} checked={this.state.globalChecked}></ModalAddElement></span>
                        <button className="myButton" onClick={this.remove}>Remove period</button>
                        <button className="myButton" disabled={this.props.result.item.length === 0} onClick={this.setResult}>Set result from merge</button>
                    </td>
                </tr>
                </tfoot>
            </table>
        );
    }
 });

Answer 1

也许你仍然需要它，我只是在寻找一个解决方案，为你的两个问题，发现了这个:

要获取pk inside success callback，我使用inside 'success' callback:

const something = $(this).data('pk');

EDIT(因为我不能添加评论，所以我编辑了我的答案):我在渲染行元素时设置pk，如下所示:

items.map(item => (
    <tr key={ item.id }>
      <td>
        <p id="itemQuantity" data-pk={ item.pk } className="editable" ... ></p>
      </td>
    ...
))

你可以看到我在渲染时直接设置pk属性，而不是在$(document).ready上。事实上，我不确定你的方法是否可行。

不记得从哪里找到的，但可以用。要设置状态成功回调应该这样写:

success: (response, newValue) => {
            this.setState({item: newValue});
        }

代替:

success: function(response, newValue) {
        ...
        }

原始答案在这里

希望能有所帮助。