xeditableをローカルに設定する

Question

私のアングル/反応プロジェクトのテーブルに対してインライン編集を実装しようとしていますが、私のコンポーネント状態で定義されたローカル配列に変更を加える方法を正確に理解できませんか？私はデータベースやサーバーを使用していない...とすべての例は、データベースと..誰かが助けることができますか？ここに私のコンポーネント..

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'); 

は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) { 
     ... 
     } 

、元の答えはhere

はそれが役に立てば幸いです。