Comment empêcher le "datepicker" de m'aider à changer la valeur de la ligne précédente?

Question

J'ai réagi au bootstrap avec la fonction datepicker pour chaque ligne du tableau. lorsque je change de première ligne est ok, mais pour la deuxième, troisième, à n lignes, il change toutes les lignes précédentes. Ma solution de contournement consiste à changer la variable ID en "" avec BreakExeption -> {}, mais ce n'est pas la solution. Quelqu'un pourrait-il aider à comprendre comment résoudre ce problème?

S'il vous plaît voir le code suivant:

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=""; 
       }); 

      }); 

     } 
..... 

et render()

    <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> 

Merci pour les deux solutions, mais je suis toujours confronté au problème. Voici le fichier console.log() lorsque je change chaque entrée. Enfin, toutes les entrées sont modifiées en dernier (07/10/2560).

Lors de la modification:

Après rafraichissement

Le dernier code:

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

J'ai la solution. Il s'agit de la liaison. J'ai sur la fonction de changement et après l'expression, je l'enlève du changement. S'il vous plaît voir le code ci-dessous pour ma solution:

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

Vous pouvez avoir initialiser setState de chaque élément de ligne il sera stor ed comme une «chose». C'est pour afin de garder une trace de ce que vous avez sélectionné.