すべての無効な入力/ ReactJSに対して同じブートストラップのツールチップを起動する

Question

反応コンポーネントのツールチップを初期化し、グローバルな単一呼び出しのようなすべての無効な入力に対して起動する最も良い方法は何ですか？

つまり、無効にされた入力にカーソルを合わせるといつでも「これは編集できません」。

私の目標は、個別に、このような入力の何百ものそれぞれをラップする必要がないことです：。

<Tooltip> 
    <input/> 
</Tooltip> 

Answer 1

を、Inputコンポーネントを作成し、ブール値の小道具にshowValidationMessageAsTooltipのようなものを渡し、そして、Input COMP内、 showValidationMessageAsTooltipがtrueの場合は、Inputを入力してください。 Tooltipである。

コード例：

return (
    showValidationMessageAsTooltip ? <Tooltip><input {...props}/></Tooltip> : <input {...props} /> 
); 

この方法で、あなただけの余分なブール小道具に合格する必要があります。

PS：特にフォーム構成で、各フォームフィールドに定義されたコンポーネントがあり、各フォームフィールドに複数のHOC（上位の構成要素）が定義されている場合は、さらに効率的な方法があります。 form config（基本的にオブジェクトの配列）。

しかし、今のところ、redux-formなどのようなものを深く掘り下げるまでは、より単純な解決策に固執することをお勧めします。