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

/**
 * 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 をエクスポートします。

.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 />)}
 </フォーム項目>