javascript - 在本地配置 xeditable

Question

我正在尝试对我的 angular/react 项目中的表进行内联编辑。我无法准确理解我应该如何对组件状态中定义的本地数组进行更改？？？我没有使用任何数据库或服务器......所有的例子都与数据库有关......有人可以帮忙吗？这是我的组件..

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，我在“成功”回调中使用:

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

编辑(因为我无法添加评论，所以我编辑了我的答案):我在渲染行元素时设置 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) {
        ...
        }

原来的答案是here

希望对您有所帮助。