React-tags: 入力コンポーネントに関する警告

作成日 2018年09月18日 · 7コメント · ソース: i-like-robots/react-tags

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)

ここで述べられてhttps://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78を次のように変更する必要があり
defaultValue={query}

どう思いますか？
ありがとう！

bug unconfirmed

ソース

luciemac

👍13

最も参考になるコメント

デフォルト値に変更するPRを追加しましたが、これが修正されるまで警告を回避するハックが必要な場合は、ReactTagsを使用するクラスにnoopメソッドを追加し、それをコンポーネントのonChangeとして参照できます。それは醜いですが、それは警告を止めます。

noOp() {
    // does nothing
}

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

chellman 2018年10月12日

👍2

全てのコメント7件

私は同じ問題を抱えています、何か提案はありますか？

gustavohornig 2018年10月02日

自分では見たことがないのですが、使用しているReactのバージョンを教えてください。

i-like-robots 2018年10月05日

React16.3.2を使用しています

luciemac 2018年10月05日

@ i-like-robots私もこの問題を抱えています。

estherleah 2018年10月11日

👍2

noOp() {
    // does nothing
}

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

chellman 2018年10月12日

👍2

これは興味深い問題であり、数年前にhttps://github.com/facebook/react/issues/1118で詳細に議論されました（ただし、16.3.2を含むReactのどのバージョンでも、この警告は見たことがありません！）。

現在の実装には技術的に「間違った」ものは何もありませんが、コンソールが乱雑になる警告は煩わしいので避ける必要があることに同意します。

defaultValueを設定すると、意図しない結果が生じる可能性があるため、正しい解決策かどうかはわかりません（https://github.com/i-like-robots/react-tags/pull/139#issuecomment-431006214を参照）。）ただし、他にもいくつかの回避策が利用できる可能性があります。

i-like-robots 2018年10月18日

これをもう少し調べてみると、この警告には5つの条件があることがわかります。

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

state.queryのデフォルト値は空の文字列であるため、デフォルトではこの_should_はtrueと評価されるため、これは私が興味を持っている最初の条件です。したがって、これにより、関数は早期に戻り、警告は出力されません。

したがって、この警告をトリガーするには、デフォルトの状態（https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35）を変更して、真の値にする必要がありました。

経験している人の中に、問題をより詳しく調べることができるように問題を示す例がありますか？

i-like-robots 2018年10月18日

このページは役に立ちましたか？

0 / 5 - 0 評価

React-tags: 入力コンポーネントに関する警告

最も参考になるコメント

全てのコメント7件

関連する問題