2016-04-18 16 views
1

Ich habe den folgenden Code in meiner Komponente. Es wird aufgerufen, wenn ich bestimmte Dinge aktualisiere und dadurch eine Menge Dinge in der Benutzeroberfläche ersetze. Alles wird aktualisiert, außer dem Wert der Eingabe, wie er vom Benutzer gesehen wird.Warum wird mein Eingabewert nicht mit React aktualisiert?

let input = { 
    id: 'discount-' + geo + '-' + segment, 
    value: percentage, 
    disabled: applyToAll, 
    placeholder: '0.00' 
}; 

cells.push(
    <td key={'cell-' + geo + '-' + segment} className="discount-segment cfix"> 
    <Text {...input} /> 
    </td> 
); 

Dies ist, was <Text> zurückkehrt, mit Dingen zur Klarheit entfernt

return (
    <div className={containerClasses.join(' ')} id={'field-container-' + id}> 
    {label} 
    <input 
     autoComplete="off" 
     type="text" 
     id={id} 
     ref="input" 
     {...extraProps} 
     name={id} 
     className={classes.join(' ')} 
     defaultValue={this.props.value} 
     onChange={this.props.onChange} 
     /> 
    </div> 
); 

Alles macht in Ordnung. Nehmen wir an, der percentage Wert ist 5 beim Start, es wird 5 im Feld angezeigt. Ich mache dann etwas anderes, das percentage auf 50 aktualisiert. (Ein Konsolenprotokoll zeigt beim Rendern die richtige Zahl an). Der Wert zeigt jedoch nur noch 5 in der Benutzeroberfläche an. Ich benutze defaultValue auf dem Eingabefeld, aber ich denke, dass sollte sich ändern, wie die ganze Sache von Eltern wieder rendert.

bearbeiten <Text> Aktualisiert value statt defaultValue einzustellen. Aber dann muss ich state verwenden, um den Wert zu aktualisieren, wenn der Benutzer tippt. Wenn ich dann neu rende, sende ich neue Requisiten mit angemessenem Wert ein, aber Requisiten werden natürlich nicht aktualisiert. Catch-22 für mich.

+0

Sind Sie sicher, dass das Ganze wieder rendert? Was passiert, wenn Sie versuchen, value anstelle von defaultValue zu verwenden? (Plus, was macht this.props.onChange?) – TAGraves

+0

@TAGraves Im Moment bin ich nicht in onchangechange .. so nichts da. Die Zeilen darüber zeigen mir, '' sind innerhalb 'render' einer Komponente. Die Rendermethode hat '{cells}' im Inneren und das wird jedes Mal aufgerufen, wenn ich es erwarte. –

+0

Das bedeutet nicht, dass Ihre Eingabe abgehängt wird und dann eine neue Eingabe gerendert wird. 'defaultValue' kann nach einem anfänglichen Rendern nicht aktualisiert werden. – TAGraves

Antwort

3

Sie benötigen ein paar Schritte ausführen:

  1. Ihre Eingabe zu braucht nur die value und onChange Requisiten verwenden, verwenden Sie nicht defaultValue
  2. initialisieren Ihr Zustand Ihre Requisiten mit Ihrem Standard festlegen
  3. Wert
  4. aktualisieren Sie Ihren Zustand, wenn Ihre Requisiten ändern

So, zum Beispiel:

const MyComponent = React.createClass({ 

    propTypes: { 
    defaultInputValue: React.PropTypes.string 
    }, 

    getInitialState() { 
    return { 
     inputValue: this.props.defaultInputValue 
    }; 
    }, 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.defaultInputValue !== this.props.inputValue) { 
     //Forcibly overwrite input value to new default if the default ever changes 
     this.setState({inputValue: nextProps.defaultInputValue}); 
    } 
    }, 

    render() { 
    return <input type="text" 
        value={this.state.inputValue} 
        onChange={e => this.setState({inputValue: e.target.value})} />; 
    } 
}); 

Im Allgemeinen Initialisierungszustand aus Requisiten ist ein No-No. Ich würde wahrscheinlich ein bisschen zusammenzucken, wenn ich das in einer Code-Review sehen würde, da es wahrscheinlich ein Verhalten gibt, das vereinfacht werden kann.

Sie können auch tun:

<input value={this.state.inputValue || this.props.defaultInputValue} /> 

so dass der Wert der Eingabe in den prop Wert zurückgesetzt, wenn Sie jemals aus dem Eingang klar. In diesem Fall müssten Sie den Zustand nicht gewaltsam mit den neuen Requisiten überschreiben.

+0

Ahhh 'componentWillReceiveProps' ist eine Methode, die ich früher gesehen habe, und sie hat nicht geklickt. Vielen Dank! –

Verwandte Themen