React-tags: Warnung zur Eingangskomponente

Erstellt am 18. Sept. 2018 · 7Kommentare · Quelle: i-like-robots/react-tags

Ich erhalte eine Warnung mit ReactTags :

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (created by Input)
    in div (created by Input)
    in Input (created by ReactTags)
    in div (created by ReactTags)
    in div (created by ReactTags)

Von dem, was hier gesagt wird , sollten wir https://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78 wahrscheinlich um etwas ändern wie:
defaultValue={query}

Was denken Sie?
Vielen Dank!

bug unconfirmed

Quelle

luciemac

👍13

Hilfreichster Kommentar

Ich habe einen PR hinzugefügt, um in defaultValue zu ändern, aber wenn Sie einen Hack wünschen, der die Warnung vermeidet, bis dies behoben ist, können Sie Ihrer Klasse eine noop-Methode hinzufügen, die ReactTags verwendet, und als onChange für Ihre Komponente darauf verweisen. Es ist hässlich, aber es wird die Warnungen stoppen.

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

chellman am 12. Okt. 2018

👍2

Alle 7 Kommentare

Ich habe das gleiche Problem, irgendwelche Vorschläge?

gustavohornig am 2. Okt. 2018

Ich habe das leider nicht selbst gesehen. Könnten Sie mir bitte mitteilen, welche React-Version Sie verwenden?

i-like-robots am 5. Okt. 2018

Ich verwende React 16.3.2

luciemac am 5. Okt. 2018

@i-like-robots Ich habe auch dieses Problem.

estherleah am 11. Okt. 2018

👍2

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

chellman am 12. Okt. 2018

👍2

Dies ist ein interessantes Thema, das vor einigen Jahren in https://github.com/facebook/react/issues/1118 ausführlich diskutiert wurde (obwohl ich diese Warnung bei keiner Version von React einschließlich 16.3.2 gesehen habe! )

An der aktuellen Implementierung ist technisch nichts _falsch_, aber ich stimme zu, dass Warnungen, die die Konsole überladen, ärgerlich sind und vermieden werden sollten.

Ich bin mir nicht sicher, ob die Einstellung von defaultValue die richtige Lösung ist, da dies unbeabsichtigte Folgen haben kann (siehe https://github.com/i-like-robots/react-tags/pull/139#issuecomment-431006214 ), aber es sind möglicherweise mehrere andere Problemumgehungen verfügbar.

i-like-robots am 18. Okt. 2018

Wenn ich mir das genauer ansehe, kann ich sehen, dass diese Warnung 5 Bedingungen hat:

https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/ReactControlledValuePropTypes.js#L32 -L46

Dies ist die erste Bedingung, die mich interessiert, da dies standardmäßig zu true ausgewertet werden sollte, da der Standardwert für state.query eine leere Zeichenfolge ist. Dies sollte daher dazu führen, dass die Funktion vorzeitig zurückkehrt und keine Warnung ausgibt.

Um diese Warnung auszulösen, musste ich daher den Standardzustand (https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35) ändern, um einen wahrheitsgetreuen Wert zu erhalten.

Hat jemand von euch, der diese Erfahrung macht, ein Beispiel, das das Problem demonstriert, damit ich es mir genauer ansehen kann?

i-like-robots am 18. Okt. 2018

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React-tags: Warnung zur Eingangskomponente

Hilfreichster Kommentar

Alle 7 Kommentare

Verwandte Themen