Textarea onchange feuern spät in ReactJS

Question

Ich baue eine App in Reaktion und eine Facette davon beinhaltet die Aufzeichnung der Aktivität aus einem Textfeld und Anzeige in Echtzeit an einem anderen Ort in der App. Ich habe den Textbereich an ein onChange-Ereignis gebunden und der onChange wird ausgelöst, aber das Problem, das ich habe, ist, dass die onChange-Funktion die Eingaben einen Tastendruck zu spät aufzeichnet. Zum Beispiel, wenn ich "Hallo" in den Textbereich eintippte, würde der OnChange Listener "Hell" aufzeichnen und ausgeben.

Der Code ist unten. danke für Ihre Hilfe!

Der Komponentencode:

export default class StepTwo extends React.Component { 

constructor(props) { 

     super(props); 

     this.state={ 
      headlineText: '', 
     } 

     this.writeHeadlineChild = this.writeHeadlineChild.bind(this); 


    } 

    updateHeadlineValue(evt) { 

     this.setState({ 
        headlineText: evt.target.value 
       }) 

    } 

    writeHeadlineChild(e) { 

     e.preventDefault(); 
     e.stopPropagation(); 
     e.nativeEvent.stopImmediatePropagation(); 

     this.props.headWriter(this.state.headlineText, this.state.headlineFont); 


    } 

     render() { 

      return (

     < 
     form className = "card-form" 
     onChange = { 
      (e) => { 
       this.writeHeadlineChild(e) 
      } 
     } > 

     < 
     div className = "form-group" 
     onChange = { 
      evt => this.updateHeadlineValue(evt) 
     } > 
     < 
     label htmlFor = "headline" 
     className = "form-label" > Your message < /label> < 
     textarea className = "form-control" 
     id = "headline" > < /textarea> < 
     /div> < 
     /form> 

     < 
     /div> 
     ) 
    } 

} 

Und die Funktion in der übergeordneten Komponente:

writeHeadline(t, f) { 

    var headline = document.querySelector('.headline'); 

    function headlinePreview() { 
     headline.innerHTML = t; 
     headline.style.fontFamily = f; 
    } 

    headlinePreview(); 

} 

Answer 1

Ich sehe hier etwas Interessantes - Sie fordern onChange auf der div und Form, anstatt die Element, das tatsächlich für die Fortführung der Veränderung verantwortlich ist. In diesem Fall ist der Knoten textarea für Änderungen verantwortlich, sodass wir Statusaktualisierungen nur als Ergebnis von Änderungen an diesem Element verarbeiten können.

Aktualisieren Sie Ihre Komponente, so dass das Textfeld seine eigenen Ereignisse behandelt (sie von form und div entfernen)

So etwas wie <textarea onChange={this.handleChange}/>

von

gefolgt

handleChange(evt) { 
    const { value } = evt.target 
    // followed by any state changes, or props callbacks 
    this.setState({ headlineText: value }) 
} 

sollte ausreichend sein, zu verwalten der Wert Ihres textarea Felds.

Answer 2

Es sieht so aus, als ob Ihre Überschrift nicht direkt an die Statusänderung der Reaktion gebunden ist. Ihr Formular hat seine eigene onchange() Funktion, die jedes Mal ausgelöst wird, wenn sich das Formular selbst ändert, aber es liest Daten, die nicht von react gesteuert werden. Es gibt also keine Garantie dafür, dass die Daten den von Ihnen eingestellten Zustand genau widerspiegeln die Eingabe.

Zu wissen, dass jedes Mal, wenn ein Staat die render() Methode der Komponente gesetzt wird aufgerufen wird, können Sie auf diese nutzen, indem Sie Ihre writeHeadline() Methode von Ihrem Stammkomponente aufrufen, nachdem die render() Methode aufgerufen wird, aber vor dem return() Aussage. Es sollte idealerweise this.state.headlineText als Textparameter verwenden.