創造的問題解決は企業環境における鍵である

企業の世界での作業は、あなたの暇な時に自分の小さなプロジェクトに取り組んでいるときほど簡単ではありません.これは誰にもニュースではない.遅かれ早かれ、我々は問題の単純な解決がこれらの会社の大きくて複雑な性質のために働かない状況で終わります.パッケージを更新できず、レガシーコードで動作するか、内部ツールやコンポーネントライブラリを使用する必要があるかどうか.あなたがどこにも見つけることができない大きな会社のために働く挑戦は常にあります.それはあなたの問題解決を創造する必要があるときです.
最近、私はこれらの問題のうちの1つに私自身に乗りました.この場合、私は<div> and <ul> タグ、入力要素なし.これは、明らかに、コンポーネントが入力要素の一部として来る自由のために特定の機能を得ることで見つからないことを意味しました.これはdisabled 機能.
それらのために、HTML入力はAを取ることができますdisabled prop :

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input.

これらのドロップダウンを使用して、ユーザーがページ上のデータをフィルタリングできるようにしました.私の課題は、スイッチをオフにするまで、ユーザーがフィルタを変更するのを防ぎ、ドロップダウンを無効にするページにスイッチを含めることでした.別の場所で簡単な問題.私たちが使用していたコンポーネントは、入力要素が組み込まれていなかったのでdisabled 機能と開発者は、それを複製していない、これらのドロップダウンを無効にする方法はなかった.
私は変更を加えるためにコンポーネントライブラリへのアクセスを持っていないし、この機能を追加しようとすると、私はこのライブラリを担当している誰を見つけるしようとするとそれを変更するように求めて時間を持っていなかった.私は創造的になる必要があった.だから私はそれを偽造.

偽造する

フィルタの準備と作業を開始し、新しいスイッチは、それらの隣に追加しましょう.

この時点でドロップダウンが動作し、スイッチは何もしない.我々はちょうど通過することはできませんdisabled コンポーネントにプロップし、それが動作する時計、我々は新しいソリューションが必要です.私は、私が働くことからドロップダウンを止めることができないならば、私がユーザーをクリックするのを止めることができたと決めました.それで、私はユーザーとコンポーネントの間にブロッカーを加えることに決めました.
私は<span> スイッチがオンにされるときはいつでも、それはドロップダウンコンテナに加えられます.The <span> コンテナを塗りつぶし、コンポーネントの上に座るので、ユーザーは<span> と実際のコンポーネントではありません.

.dropdown-disabled {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

それから、私はスパンに色を加えて、それを透明にしました.これはカーソルをcursor: not-allowed ドロップダウンがグレーになって、使用できないように見える.そして、Vil il、ユーザーはdropdownsを使用することができないので、すべての意図と目的のために、彼らは現在いくつかの創造的な問題解決と若干のCSSより少しを使用して、無効にされます.

  box-shadow: inset 100px 100px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;

どうやってこの問題を解決しますか?何か似たような話はありますか.私はコメントで知っている、私はそれらを聞いてみたい!