0

まず、私は反応とCSS-IN_JSにまったく慣れていないので、これは初心者の質問かもしれません. しかし、私はこれに対する良い答えを見つけることができませんでした。

使用しているフォームに反応プロジェクトのフローティング ラベルを実装しようとしています。プロジェクト リポジトリ: https://github.com/DawidGaleziewski/alpha-tank-full-stack/tree/master/client

ラベルと入力フィールドを組み合わせた別のコンポーネントを作成しました: https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/atoms/Inputs/InputSlider.js

ラベルを上に移動する必要があるかどうかを判断するために、入力の状態を使用し、長さが 0 より大きい場合はスタイルを適用してラベルを上に移動します。

入力の状態はフォームの状態にリンクされています: https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/Forms/LoginForm.js

それは正常に動作しますが、問題はログインフォームとオートコンプリート (ブラウザーに保存された資格情報/パスワード) にあり、それらがブラウザーに適用されると、コンポーネントはフォーム/入力に設定した初期状態を記憶し、ラベルがカバーされます入力のテキスト: 問題の画像

私は2つの解決策を考えることができますが、それらについてはよくわかりません:

  1. 感情の状態を使用してラベルをアップする必要があるかどうかを判断する代わりに、input:valid + label を対象とする標準の CSS トリックを使用します。ただし、問題は、入力タグで必須を使用する必要があることです。また、私のアプリには、オプションにする必要があるフィールドがたくさんあります。

  2. useEffect を使用して、コンポーネントのマウント時にフォームから入力の初期状態を取得します (つまり、document.querySelector(input).value)。ただし、DOMから状態の値を取得するべきではないと思うので、それについてはわかりません。

ここで明らかな何かが欠けているように感じます。提案ありがとうございます

4

1 に答える 1