React - Reset Komponenteneingang

Question

Ich habe eine harte Zeit mit einer Komponente und ich hoffe, dass Sie mir helfen werden. So habe ich eine benutzerdefinierte Komponente erstellt, die einen formatierten Wert von dem zurückgibt, was der Benutzer in der Eingabe eingegeben hat (wenn der Benutzer '1999-9-9' eingegeben hat, gibt es '1999-09-09 00:00' zurück) und den Wert wird dem Status des übergeordneten Elements zugewiesen (handleCustomInputValueChange). Nun .. das Problem ist, dass, wenn ich auf den 'numerischen' Typ klicke und ich die Eingabe mit zufälligen Zeichen fülle, speichere es und gehe zu 'datetime', die Eingabe bleibt unverändert, es wird nicht zurückgesetzt oder es funktioniert nicht ' t bekomme die Daten von Requisiten. Es hat den alten Wert von der 'Nummer'. Die componentWillReceiveProps() -Methode wäre in vielen Fällen die Antwort auf dieses Problem, aber nicht hier, weil ich nur die Daten an die Eltern senden möchte. Ich brauche diese Daten nicht, um sie an meinen 'CustomInput' zurückzusenden.

Geordnete Komponente:

handleCustomInputValueChange(changeEvent) { 
     this.setState({value: changeEvent}); 
    } 
    ... 
    switch(type) { 
     case 'NUMERIC': 
      return <CustomInput data={value} type="numeric" callbackParent={handleCustomInputValueChange} /> 
      break; 
     case 'DATETIME': 
      return <CustomInput data={value} type="datetime" callbackParent={handleCustomInputValueChange} /> 
      break; 
    } 

Kinderkomponente

export default class CustomInput extends Component { 
    constructor(props) { 
     super(); 

     this.state = { 
      value: props.data || '' 
     } 
    } 

    handleChange(event) { 
     /* formatting data */ 
     callbackParent(formattedData); 
    } 

    render() { 
     return <input type="text" onChange={this.handleChange} value={this.state.value} />; 
    } 
} 

So .. Gibt es eine Möglichkeit, die Eingabe zurückgesetzt, nachdem auf einen anderen Typ zu wechseln?

Danke!

Answer 1

Sie passieren nicht die Zustandsdaten an das Kind richtig, während das Bestehen der data auf das Kind, sollten Sie tun,

<CustomInput data={this.state.value} type="numeric" callbackParent={handleCustomInputValueChange} /> 

Edit: Machen Sie Ihr Kind in Requisiten für den Wandel hören, basierend auf diesem Set der staatliche Wert.

Oder Sie können Ihr Kind dies machen ändern:

render() { 
    const {data} = this.props 
     return <input type="text" onChange={this.handleChange} value={data?data:''} />; 
    }