Gibt es eine Möglichkeit, nur nach einer vollständigen Eingabe zu rendern? Eine Verzögerung render() - ReactJS

Question

Ich habe einige Text Controlled Komponenten-Eingänge für ein Formular:

<input type="text" onChange={(e) => this.props.changeBusiness(e)}/> 

Ich möchte auch die (oben) Texteingabe in einem separaten Bauteil machen - aber! Es wäre schön, wenn ich es mit der COMPLETED-Texteingabe wiedergeben könnte, um (meiner Meinung nach) ein besseres Gefühl zu geben.

• Wie könnte dies implementiert werden? Ich nehme an, ich könnte einen onBlur Handler haben, der ausgelöst wird.
• Gibt es eine Möglichkeit, die render() bis nach der vollständigen Texteingabe zu verzögern?

Danke

Answer 1

Ja, wenn Sie ein verzögern wollen machen Sie müssen nur null zurück, in der auf eine Fahne, basierend machen. Nehmen wir an, Sie haben eine Statusvariable inputBlurred, die Sie als Prop zu etwas anderem weitergeben.

render() { 
    if (!this.props.inputBlurred) return null; 
    ... more here 
} 

Sie würden es so verwenden.

class ParentComponent extends Component { 
    constructor() { 
     super(); 
     this.state = {inputBlurred: false} 
    } 
    handleBlur = (e) => { 
     if(e.target.value){ 
      this.setState({inputBlurred: true}); 
     } 
    } 
    render() { 
     return(
      <div> 
       <input onBlur={this.handleBlur} /> 
       <ChildComponent inputBlurred={this.state.inputBlurred} /> 
      </div> 
     ) 
    } 
} 

Answer 2

Sie haben mehrere Möglichkeiten.

1. Erstellen von benutzerdefinierten Input Wrapper um input Komponente, die auf "vollständig" Trigger ändern "change" -Ereignis tut - zum Beispiel auf Unschärfe. Während Sie tippen, erhält die übergeordnete Komponente keine inkrementellen Ereignisse.

2. Von Eltern, übergeben onBlur Handler Kind input Komponente und so schnell, wie onBlur Handler ausgelöst wird, Eingabewert machen, wo immer Sie wollen.