datepickerが前の行の値を変更するのを防ぐ方法を教えてください。

Question

私は、テーブルの行ごとにdatepicker機能を備えた反応ブートストラップを持っています。 最初の行を変更するとOKですが、2行目、3行目、n行目では前のすべての行が変更されます。

私の回避策は、ID変数をBreakExeption - > {}で ""に変更することですが、解決策ではありません。 誰でもこの問題を解決する方法を理解してもらえますか？

次のコードを参照してください：

class DSRegisters extends Component { 
     ..... 


     food_dateChanged(registerId, e) { 
      var BreakException = {}; 

      $('.datepicker').each(function(){ 
       $(this).datepicker({ 
        format: 'dd/mm/yyyy', 
        language: 'th-th', 
        todayBtn: "linked", 
        autoclose: true, 
       }).on("change", function(e) { 

        console.log(e.target.value); 
        var value = e.target.value; 
        console.log(registerId); 

        if (value) { 
        const [bd, bm, by] = value.split("/"); 
        value = new Date(by-543,bm-1,bd); 
        } 
        Meteor.call('registers.food_dateChanged', registerId, value, (error) => { 
         if (error) { 
          console.log(error.reason, 'danger'); 
         } else { 
          console.log('success'); 
          throw BreakException; 

         } 
        }); 
        registerId=""; 
       }); 

      }); 

     } 
..... 

をして（レンダリング）両方のソリューションのための

    <td> 
        <FormGroup> 
         <input 
          type="text" 
          className="form-control datepicker" 
          id="datepicker" 
          name="food_date" 
          ref={food_date => (this.food_date = food_date)} 
          defaultValue={food_date ? 
          (food_date.getDate()<10?'0':'')+food_date.getDate()+'/'+ (food_date.getMonth()<9?'0':'')+(food_date.getMonth()+1)+'/'+(food_date.getFullYear()+543) 
          : 
          food_date 
          } 
          onFocus={this.food_dateChanged.bind(this, _id)} 

         /> 

        </FormGroup> 
        </td> 

おかげで、私はまだ問題に直面しています。 以下は、各入力を変更したときのconsole.log（）です。 最後に、すべての入力が最後の入力に変更されます（07/10/2560）。

変更する場合：リフレッシュした後

：

最新のコード：あなたはそれはので、各行の項目のSETSTATEを初期化していて

food_dateChanged(registerId, e) { 
    $('.datepicking').datepicker({ 
      format: 'dd/mm/yyyy', 
      language: 'th-th', 
      todayBtn: "linked", 
      autoclose: true, 
      }).on("hide", (e) => { 
       this.setState({ datePick: e.target.value }); 
       console.log(this.state.datePick); 
       if (this.state.datePick) { 
        const [bd, bm, by] = this.state.datePick.split("/"); 
        value = new Date(by-543,bm-1,bd); 
       } 
       Meteor.call('registers.food_dateChanged', registerId, value, (error) => { 
        if (error) { 
         console.log(error.reason, 'danger'); 
        } else { 
         console.log('success'); 
        } 
       }); 
      }); 
} 

Answer 1

私は解決策を得ました。 これはバインディングについてです。 私は変更機能を持っており、式の後に変更からバインドを解除します。 私の解決策については、次のコードを参照してください。

food_dateChanged(e) { 
    $('.datepicker').datepicker({ 
      format: 'dd/mm/yyyy', 
      language: 'th-th', 
      autoclose: true, 
      todayBtn: "linked", 
      forceParse: false 
    }).on('change', function(e) { 
      var value = e.target.value; 
      console.log(value); 
      console.log(e.target.id); 
      console.log(e.target.name); 

      // Process when value exist 
      if (value) { 
       const [bd, bm, by] = value.split("/"); 
       value = new Date(by-543,bm-1,bd); 
      } 

      Meteor.call('registers.food_dateChanged', e.target.name, value, (error) => { 
       if (error) { 
        console.log(error.reason, 'danger'); 
       } else { 
        console.log('success'); 
        $('.datepicker').unbind('change'); 
       } 
      }); 
    }); 
} 

Answer 2

記憶される「もの」として編集されています。あなたが選んだものを追跡するためです。