react+antd.3x は IP 入力ボックスを実装します

react+antd.3x は IP 入力ボックスを実装します

この記事では、IP入力ボックスを実装するための react+antd.3x の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

現れ方は次のとおりです。

js+html

/**
 * 2021 10 26 日曜日
 * 仮想サブネットの作成と変更に使用される IP 入力ボックス * 使用法: antd-form カスタム フォーム コントロールを参照してください。
 */
'react' から React をインポートします。
'antd' から { Input} をインポートします。
'./index.less' からスタイルをインポートします
クラスIpInputはReact.Componentを拡張します{
    コンストラクタ(){
        素晴らしい();
        this._refs = {
          refip_0: React.createRef()、
          refip_1: React.createRef()、
          refip_2: React.createRef()、
          refip_3: React.createRef()
        };
    }
    ハンドル番号変更 = (e,type) => {
        // 最小値が 0 であることを確認します。
        定数数値 = parseInt(e.target.value || 0, 10);
        if (isNaN(数値)) {
          戻る;
        }
        オブジェクトを{}とします
        Obj[`${type}`] = 数値
        このトリガーの変更(Obj);
    };
    トリガー変更 = 変更された値 => {
        const { onChange, 値 } = this.props;
        変更があった場合
          変更後({
            ...価値、
            ...変更された値、
          });
        }
      };
    turnIpPOS = (e,type)=>{
        自分自身 = this とします。
         //左矢印は左にジャンプし、何もしません if(e.keyCode === 37) {
          if(type === 0) {} else {
            self._refs[`refip_${type-1}`].current.focus();
          }
        }
        //右矢印、Enter キー、スペースバー、コロンはすべて右にジャンプし、右のものは何もしません if(e.keyCode === 39 || e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {
           if(type === 3) {} else {
            self._refs[`refip_${type+1}`].current.focus();
           }
        }
    }
    与える(){
        const { 値 } = this.props;
        戻る (
            <Input.Group コンパクト クラス名 = {styles.inputGroup}>
              <Input style={{ width: '24%' }} className = {styles.self_input} ref = {this._refs.refip_0} value = {value.ip_0} maxLength = {3} onChange={(e)=>{this.handleNumberChange(e,'ip_0')}} onKeyUp ={(e)=>this.turnIpPOS(e,0)}/>
              <span className = {styles.dot} ></span>
              <Input style={{ width: '24%' }} className = {styles.self_input} ref = {this._refs.refip_1} value = {value.ip_1} maxLength = {3} onChange={(e)=>{this.handleNumberChange(e,'ip_1')}} onKeyUp ={(e)=>this.turnIpPOS(e,1)}/>
              <span className = {styles.dot}></span>
              <Input style={{ width: '24%' }} className = {styles.self_input} ref = {this._refs.refip_2} value = {value.ip_2} maxLength = {3} onChange={(e)=>{this.handleNumberChange(e,'ip_2')}} onKeyUp ={(e)=>this.turnIpPOS(e,2)}/>
              <span className = {styles.dot}></span>
              <Input style={{ width: '24%' }} className = {styles.self_input} ref = {this._refs.refip_3} value = {value.ip_3} maxLength = {3} onChange={(e)=>{this.handleNumberChange(e,'ip_3')}} onKeyUp ={(e)=>this.turnIpPOS(e,3)}/>
            </Input.Group>
        )
    }
   
}
デフォルトの IpInput をエクスポートします。

CS

.inputGroup{
  境界線: 1px 実線 #d9d9d9;
  境界線の半径: 2px;
  遷移: すべて 0.3 秒;
  &:ホバー{
    境界線の色: #45bbff;
    右境界線の幅: 1px !重要;
    アウトライン: 0;
    ボックスシャドウ: 0 0 0 2px rgba(29, 165, 255, 0.2);
  }
  テキスト配置: 中央;
  .dot {
    幅: 3px;
    高さ: 3px;
    境界線: 1px実線 #000;
    境界線の半径: 3px;
    背景色: #000;
    不透明度: 0.5;
    zインデックス: 9;
    位置: 相対的;
    上: 21px;
  }
}
.self_input {
  境界線: なし;
  アウトライン: 0px;
  &:ホバー{
    ボックスシャドウ: なし;
  }
  &::選択{
    ボックスシャドウ: なし;
  }
  &:集中 {
    ボックスシャドウ: なし;
  }
}

使い方

'../../public/IpInput' から IPInput をインポートします。
<FormItem label="サブネット ゲートウェイ" {...formItemLayout}>
                {getFieldDecorator('価格', {
                  初期値: { ip_0: 255, ip_1: 235, ip_2: 255, ip_3: 255 },
                  ルール: [{ バリデータ: this.checkIp }],
                })(<IPInput />)}
 </フォーム項目>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 入力ボックスの値を取得する方法のReactの例
  • 反応ネイティブソフトキーボードがポップアップして入力ボックスをブロックする問題を解決する
  • React Androidで入力ボックスがモバイルキーボードによってブロックされる問題を解決する方法
  • React-Nativeはテキスト入力ボックスコンポーネントの実装コードを作成します

<<:  HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

>>:  MySQL テーブルにはどのくらいの量のデータを保存できますか?

推薦する

JavaScript でのモグラ叩きゲームの実装

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

JavaScript で簡単なモグラ叩きゲームを実装する

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

Vueバインディングクラスとバインディングインラインスタイルの実装方法

目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...

JavaScriptのプロトタイプオブジェクトを徹底的に理解しましょう

目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...

Linux で MongoDB のリモート自動バックアップを実装する方法

序文古いプロジェクトを引き継ぐ苦労 - MongoDB クラスターの学習と構築に関する前回の記事を読...

INS と DEL を使用してドキュメントの変更をマークする方法の詳細な説明

ins と del は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

Linux ハードウェア構成コマンドの例

ハードウェア ビュー コマンドシステム # uname -a # カーネル/オペレーティング システ...

JSは要素のドラッグとプレースホルダー機能を実装します

このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後...

VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法

今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...

DockerでPython環境をパッケージ化するプロセスの詳細な説明

docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...

SQL インジェクション脆弱性プロセスの例と解決策

コード例: パブリッククラスJDBCDemo3 { パブリック静的voiddemo3_1(){ bo...

Spring Boot 階層化パッケージング Docker イメージの実践と分析 (推奨)

目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...

MySQLでバッチを更新するいくつかの方法

通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...