Reactマウスの複数選択機能の設定方法

Reactマウスの複数選択機能の設定方法

一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ リストと画像では、マウスによる単一選択、複数選択、逆選択機能を実装します。

# React マウスマルチプル
# React マウス複数選択コンポーネント

React マウス マルチ選択コンポーネント

制限

> 主にマウスの複数選択の効果を実現します。元のリストを破壊することなく、埋め込まれたコンポーネントはマウスの複数選択機能を備えています。

npm パッケージ アドレス [リンク](https://www.npmjs.com/package/mousemultiples)

インストール

npm と マウスマルチプル

構成項目の使用

/**
 * wrapperScroll?: any, // スクロール単位 'ID';
 *
  * itemClass: string, // リストボックスの一般的な持ち運びクラス
 *
  * activeClass?: string, // リストボックスの選択クラス
 *
  * isDataChange: any, // レンダリングされた配列、データの変更を検出 *
  * activePosition?: any, // データをアクティブに選択する *
  * onSelected: (pos: any, item: any, data: any) => void, // ドラッグ *
  * onSingleSelected?: (pos: any, item: any, data: any) => void, // クリック *
  * 注: itemClass と子ループ ボックスの className は一貫している必要があり、同じボックスが data-position にバインドされ、選択された一意の ID がエクスポートされる必要があります。 * 注: 疑問符の付いた項目はオプションです。それ以外の場合は必須です。
 */

> 操作手順:
> マウスクリック、単一選択
> Ctrl + マウスクリック、複数選択、選択チェック、選択反転
> Ctrl + a すべて選択
> マウスをドラッグして複数の範囲を選択します

例:

<マウスマルチプル
    wrapperScroll="classify-img_body"
    アイテムクラス='選択ボックス'
    activeClass='選択ボックスアクティブ'
    アクティブポジション={アクティブポジション}
    onSelected={選択済み}
    isDataChange={画像リスト}
    {imageLists.map(item => {
        戻る (
            <div 
            クラス名="選択ボックス" 
            データ位置={item.FileId}
            >
                <div className="listImage"><img src={ item.FileUrl } /></div>
            </div>
        )
    })}
</マウス複数>

> 説明:

> 子供向けのカスタムデザイン、スタイル、グリッド、選択効果など。

> コンポーネントをインポートし、設計されたリストを直接ラップし、className と itemClass が一貫していることを確認し、data-position をインポートし、activeClass に強調表示されたスタイルがあることを確認します。 。 。

以上がReactマウスマルチ選択機能の詳しい内容です。Reactマウスマルチ選択の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JS で react-tooltip プラグインを使用してマウスホバーボックスを表示する
  • ReactJSはフォームで単一選択、複数選択、逆選択の例を実装します

<<:  MySQL 5.7.18 アーカイブ圧縮版のインストールチュートリアル

>>:  Dockerでイメージを削除する方法

推薦する

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...

画像の半透明処理 画像と半透明の背景の実装のアイデアとコード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

リバースプロキシ設定を実装するためのユニバーサルnginxインターフェース

1. プロキシサーバーとは何ですか?プロキシ サーバーは、クライアントが要求を送信すると、それを直接...

Tomcat CentOS インストールプロセス図

Tomcat CentOS インストールこのインストール チュートリアルでは、次の内容について説明し...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

テーブル編集操作を実現する js+Html

この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...

Linux環境にDocker環境をインストールする(落とし穴なし)

目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...

Docker に influxdb をインストールするための詳細なチュートリアル (パフォーマンス テスト)

1. 前提条件1. プロジェクトが展開されました2. Dockerはすでにインストールされている2...

MySQL Innodbの主な機能挿入バッファ

目次挿入バッファとは何ですか?挿入バッファのトリガー条件は何ですか?なぜ一意のインデックスにできない...

Linux viコマンドの知識ポイントと使い方のまとめ

Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...

Vueはデジタル千単位区切り形式をグローバルに実装します

この記事の例では、Vue がデジタル 3 桁区切り形式をグローバルに実装するための具体的なコードを参...

デザインストーリー: ナンバープレートを覚えられない警備員

<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...