私は反応するのが初めてで、反応フロントエンドをフラスコのバックエンドに接続しています。私はグループプロジェクトに参加していますが、作業の90％をなんとかして担当しています。私はMUIを使用してフィールドを実装しましたが、柔軟性があり、外観よりも作業することを好みます。
私はreact-form-hooksを使用してフォームを作成し、カスタム範囲スライダーを実装しようとしました（すべてがコンポーネントに分割されているわけではなく、主に単一のファイルであると申し訳ありません）。React、JS、TSXは初めてです（投稿の下部にサンドボックスがあります）。
*補足：フォームの読み込みは現在かなり遅いので、パフォーマンスを改善するためのヒントをいただければ幸いです。（:(実際には、この時点でアイデアに感謝し、フィードバックを受け付けています）。
私が達成しようとしていること：
フォームの0から100までの値の範囲として入力を取得しようとしています。値は、デフォルトで[0,100]として渡すことができます。更新されている場合は、送信を押すと、状態の現在の値（[min、max]）が送信されます。情報は、POSTリクエストを介してAPIバックエンドへのjson応答として渡されます。
私はreact-hooks-formでレンジスライダーを実装する上でいくつかのオプションをオンラインで見つけましたが、残念ながらそれらのどれも動作させることができませんでした。誰かがレンジスライダーの実装を手伝ってくれませんか（フォームで3つ使用する必要があります）？
これが不可能な場合は、次のいずれかの方法で支援していただけますか。
オプション1：次のことを行う選択ボックス/コンボボックスを設定します。
対応する最大/最小オプションに基づいて、ユーザーに最大または最小オプションを提供します。つまり、最大または最小の選択/コンボボックスのいずれにも入力がない場合：両方のボックスの値の可能な範囲は0〜100になります。1つのボックスの値に触れた場合、2番目の選択/コンボフィールドの値は、対応する範囲の残りの値になります。
たとえば、最小値として70を選択した場合、他の選択/コンボでは、空白のままにするか、オプション70〜100を指定できます。または、最大入力フィールドに82を選択した場合、最小値の選択は最小値に0から82を使用するか、空白のままにします。
オプション2：ユーザーが次のようなものを入力した場合にエラー状態になる上記と同じ検証スキーマのテキスト入力フィールド：artist-rating min：40 Artist-rating max：20
サンドボックスは次のとおりです。
投稿を更新していただきありがとうございます。
問題は、 Componentがデフォルトの入力小道具を受け取らないことです。したがって、デフォルトと小道具を返すため、によって返されるメソッドMui Sliderを拡散することはできません。registerreact-hook-formvalueonChange
しかしreact-hook-form、これは優れたライブラリであり、メインのReact UIライブラリとの統合にすでに対応しています：https ：//react-hook-form.com/get-started#IntegratingwithUIlibraries
ここに基本的な例を実装しました：https ：//codesandbox.io/s/wonderful-silence-9qlfbj？file = / src / App.jsこれらは非常に広範囲で明確なAPIを公開しているため、使用する予定がある場合は時間をかけて学習してください。フォーム管理ライブラリとして使用します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加