Bei Datepicker habe ich ein onChange Ereignis. Das Problem ist, wenn ein Benutzer beginnt, das Datum manuell zu ändern.

Wenn der Benutzer nur den Tag ändert, wird die Funktion onChange aufgerufen und sendet eine Datenanforderung.

Wenn der Benutzer weiterhin manuell Änderungen vornimmt, wird jedes Mal onChange ausgeführt, was zu Leistungsproblemen führt.

Wie kann ich dieses Problem vermeiden?

Beispiel für einen Datepicker-Code:

 <Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onChange={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     value={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />
0
James Delaney 18 Jän. 2019 im 18:07

3 Antworten

Beste Antwort

Ich würde es nicht als Leistungsproblem bezeichnen. Da die Reaktion der Datenbindung in eine Richtung folgt, muss der Entwickler entscheiden, wann das Rendern aufgerufen (oder das Rendern verschoben) werden soll. Das virtuelle DOM sollte synchron sein.

Nebenbei bemerkt, Sie könnten 'onBlur' anstelle von 'onChange' verwenden, um Änderungen nur dann auszulösen, wenn der Benutzer die Eingabe beendet und sich konzentriert hat.

<Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onBlur={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     defaultValue={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

Im obigen Fall ist die Eingabe "unkontrolliert" (defaultValue), da reag die Änderung erst bemerkt, wenn der Benutzer sich nicht mehr auf die Eingabe konzentriert.

1
Rishabh 18 Jän. 2019 im 15:20

Die wahrscheinlich einfachste Lösung wäre, das Ereignis onChange nicht zum Abrufen von Daten zu verwenden, sondern nur zur Steuerung der Eingabe und mit einer Schaltfläche onClick zum Abrufen.

1
Linschlager 18 Jän. 2019 im 15:11

Ich hatte ein ähnliches Problem mit React Js.

Wenn ich das Datum ändere, nimmt die App keine Änderung vor. Es ist das aktuelle Datum.

Ich habe dieses Problem gelöst, indem ich onFocus anstelle von onBlur oder onClick verwendet habe, da sich datepicker automatisch auf das Textfeld konzentriert, das die Änderung vorgenommen hat (in meinem Fall). Verwenden Sie bei Bedarf auch onChange über onFocus.

<Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onFocus={this.handleFieldChange}
     onChange={this.handleFieldChange}
     type="date"
     name="reportDateStarted"
     defaultValue={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

Ich hoffe, es hilft.

1
Suraj Neupane 31 März 2020 im 10:04