問題タブ [chakra-ui]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - Next JS と Chakra UI を使用してレスポンシブ モードでナビゲーション バーを正しくセットアップできない
Next JS と Chakra UI を使用して Web サイトを構築しようとしており、レスポンシブにしたいと考えていました。そのため、react-responsive パッケージを使用してそうしました。私の最初の目標は、応答性の高いナビゲーション バーを作成することです。作業は次のとおりです。
デスクトップモードでは、これは私が期待している出力です:
ライトモードからダークモードへの切り替えは完全に行われます。モバイル モードでは、ナビゲーション バーの代わりにハンバーガーが必要です。クリックすると、すべてのナビゲーション バーのコンテンツを表示する Drawer Chakra UI 要素があります。
これらはすべて期待どおりに実装されていますが、小さなバグが発生したようです。デスクトップ モードでページを更新するたびに、月のアイコンではなくハンバーガーのアイコンが表示されます。
ここに私が直面している問題の簡単なデモがあります
この部分に対応するコードを添付しました
パッケージのインポートと変数の割り当て, 私たちは心配していますisBigScreen
次に、基本的にいくつかの構成を持つ Flex である NavContainer を返します。
コードのこの部分は、左側のカラー トグルを設定します。これは、react-responsive readme のサンプル コードから取得したものです。
これは、問題を引き起こしていると私が感じるコードの一部です
コードのこの部分は、画面がデスクトップの場合、画像 1 と 2 に示すように同じ行にリンク (ホーム、概要、プロジェクト、ブログ) を含むナビゲーション バーを表示し、これがデスクトップ モードでない場合は、ハンバーガーのアイコンを表示します。
コードのこの部分は、ドロワーが左からスライドするモバイル モードの場合に対処します。これも完璧に機能しています。
さらに説明が必要な場合は、喜んでお手伝いします。前もって感謝します。
javascript - Formikフォームを使用して入力チャクラUI要素の「削除」キーonKeyPressを検出する
Input内部のようなChakra UI要素がありFormik Formます。
deleteGoogle Chrome バージョン 91.0.4472.114 (公式ビルド) (x86_64) で macOS 10.15.7のキーを押しても、アルファベット キーのプリントアウトを取得できますが、プリントアウトを取得できません。
誰が私が間違っているのか考えていますか?
これは、eventキーボードで文字 R を押したときの出力です。
reactjs - Create React App の Chakra UI が Hook エラーをスローする
React と Chakra に取り掛かります。「create-react-app」で作成した小さな React アプリがあり、少し進んだ後、Chakra UI を追加してスタイリングを追加したいと思いました。公式ドキュメントに従ってセットアップしましたが、index.js ファイルに「ChakraProvider」コンポーネントをセットアップすると、フック エラーが発生します。これらのコンポーネントを削除すると、アプリは正常に動作します。しかし、私が知る限り、コンポーネントは適切に配置されています。
そして、これは私のpackage.Jsonです: