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.
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
@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. –
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