Reagire lentamente con più ingressi di testo controllati

Question

Ho un modulo con più input di testo. Li ho tutti impostati come ingressi controllati. Durante la digitazione, c'è un ritardo di diversi secondi per la visualizzazione del nuovo testo nel campo. Ecco un campo esempio:

<label>Event Name</label> 
<input type="text" 
     placeholder="Title" 
     className="form-control" 
     name="title" 
     value={this.state.event.title} 
     onChange={this.handleChange} /> 

non riesco a capire che cosa sta causando ad essere così lento o cosa fare per risolvere il problema.

AGGIORNATO: Ecco il componente, dovrebbe essere sufficiente per mostrare cosa sta succedendo.

let CreateEventForm = React.createClass({ 
    submit: function() {}, 
    handleChange: function(e){ 
    let value = e.target.value; 
    let name = e.target.name; 
    if(value === 'true'){ 
     value = true; 
    } 
    if(value === 'false'){ 
     value = false; 
    } 
    // If true/false toggle old 
    let oldState = this.state.event[name]; 
    if(typeof oldState === 'boolean'){ 
     value = !oldState; 
    } 
    // If is array 
    if(name.indexOf('[]') > -1){ 
     name = name.replace('[]', ''); 
     oldState = this.state.event[name]; 
     var pos = oldState.indexOf(value); 
     if(pos > -1){ 
     oldState.splice(pos, 1); 
     } else { 
     oldState.push(value); 
     } 
     value = oldState; 
    } 
    let event = this.state.event; 
    event[name] = value; 
    this.setState({event: event}); 
    console.log(this.state.event); 
    }, 
    getClasses(field, additionalClasses = []) { 
    // If a string is passed for additional class, make array 
    if(!Array.isArray(additionalClasses)){ 
     additionalClasses = [additionalClasses]; 
    } 
    let useDefaultColumns = additionalClasses.filter(function(className){ 
     return className.indexOf('col-') > -1; 
     }).length === 0; 
    let hasError = function(){ 
     let fields = Array.isArray(field) ? field : [field]; 
     return fields.filter(function(field){ 
      return !this.props.isValid(field); 
     }.bind(this)).length > 0; 
    }.bind(this)(); 
    return classnames({ 
     'col-sm-4': useDefaultColumns, 
     'form-group': true, 
     'has-error': hasError 
    }, additionalClasses); 
    }, 
    render: function() { 
    return (
     <form ref="eventForm" onSubmit={this.submit}> 
     <SavedModal isOpen={this.state.saved} reset={this.resetForm} style={this.state.modals.styles} /> 
     <h3>Info</h3> 

     <div className="row"> 
      <div className={this.getClasses('title')}> 
      <label>Event Name</label> 
      <input type="text" placeholder="Title" 
        className="form-control" 
        name="title" 
        value={this.state.event.title} 
        onChange={this.handleChange} /> 
      {this.renderHelpText(this.props.getValidationMessages('title'))} 
      </div> 
     </div> 
     <div className="row"> 
      <div className={this.getClasses('type')}> 
      <label>Event Type</label> 
      <select name="type" 
        className="form-control" 
        value={this.state.event.type} 
        onChange={this.handleChange} 
        onBlur={this.props.handleValidation('type')}> 
       <option value="">Select Event Type&hellip;</option> 
       {this.state.calendarTypes.map(function (type, key) { 
       return <option value={type.name} key={key}>{type.name}</option> 
       })} 
      </select> 
      {this.renderHelpText(this.props.getValidationMessages('type'))} 
      </div> 
     </div> 

     <h3>Duration</h3> 

     <div className="row"> 
      <div className="form-group col-sm-2"> 
      <input type="checkbox" name="allDay" checked={this.state.event.allDay} onChange={this.handleChange}/> All Day 
      </div> 
     </div> 
     <div className="row"> 
      <div className="form-group col-sm-2"> 
      <input type="checkbox" name="repeats" checked={this.state.event.repeats} onChange={this.handleChange}/> Repeats&hellip; 
      </div> 
      <br/><br/> 
     </div> 

     <h3>Location</h3> 
     <div className="row"> 
      <div className={this.getClasses('location')}> 
      <select name="location" 
        className="form-control" 
        value={this.state.event.location} 
        onBlur={this.props.handleValidation('location')} 
        onChange={this.handleChange}> 
       <option value="">Select a Location&hellip;</option> 
       {this.state.locations.map(function (location, key) { 
       return (
        <option value={location.name} key={key}>{location.name}</option> 
       ); 
       })} 
      </select> 
      {this.renderHelpText(this.props.getValidationMessages('location'))} 
      </div> 
     </div> 

     <h3>Description</h3> 
     <div className="row"> 
      <div className={this.getClasses('description')}> 
      <label>Write a description:</label> 
      <textarea className="form-control" 
         name="description" 
         value={this.state.event.description} 
         onChange={this.handleChange} 
         onBlur={this.props.handleValidation('description')} 
         rows="10"></textarea> 
      {this.renderHelpText(this.props.getValidationMessages('description'))} 
      </div> 
     </div> 

     <h3>Event Details</h3> 
     <div className="row"> 
      <div className={this.getClasses('fee')}> 
      <label>Fee:</label> 
      <input type="text" 
        className="form-control" 
        name="fee" 
        value={this.state.event.fee} 
        onChange={this.handleChange} 
        onBlur={this.props.handleValidation('fee')}/> 
      {this.renderHelpText(this.props.getValidationMessages('fee'))} 
      </div> 
     </div> 

     <div className="row"> 
      <div className="col-sm-12"> 
      <button className="btn btn-primary" type="submit"> 
       Create Event 
      </button> 
      </div> 
     </div> 

     </form> 
    ); 
    } 
}); 

Answer 1

Ecco un esempio per un modello di input, Plug in or pattern for dealing with large forms in React?. La cosa principale è avere il tuo input come componente che passa le modifiche al genitore ma non si aggiorna dai puntelli se sono gli stessi.

Answer 2

Avevo una situazione simile e la mia soluzione era disabilitare React Dev Tools. Stavano influenzando in qualche modo i campi di input. Il problema è che non è sufficiente aggiornare una pagina se hai fatto clic sulla scheda React Dev Tools. Stanno ancora influenzando i tuoi input. Devi aprire una nuova pagina per fermarli. Puoi anche rimuoverli completamente da Chrome ma non è consigliabile farlo perché sono utili. :)

Answer 3

Ci sono molte possibili ragioni per questo. Ho affrontato il problema simile e filtrata la principale causa di:

• grande Stato, quindi ci vuole fino qualche tempo
• Reagire Dev Tool/uso di non minified reagire
• mutando dati relativi allo stato

Qualunque sia la ragione, ho trovato una soluzione rapida per questo. Se vuoi solo salvarlo nello stato ma non usarlo per il rendering live. Quindi puoi tranquillamente sostituire "onChange" in "onBlur". Questo non ha deficit e ritardo. Se conosci altri casi in cui questo non funziona, fammelo sapere!

Modificare il codice come segue: <label>Event Name</label> <input type="text" placeholder="Title" className="form-control" name="title" value={this.state.event.title} onBlur={this.handleChange} />