react+antd.3x implementiert IP-Eingabefeld

/**
 * zks 2021 10 26
 * IP-Eingabefeld zum Erstellen und Ändern virtueller Subnetze * Verwendung: Siehe benutzerdefinierte Formularsteuerelemente von antd-form.
 */
importiere React von „react“;
importiere { Input} von 'antd';
Stile aus „./index.less“ importieren
Klasse IpInput erweitert React.Component{
    Konstruktor(){
        super();
        diese._refs = {
          refip_0: React.createRef(),
          refip_1: React.createRef(),
          refip_2: React.createRef(),
          refip_3: React.createRef()
        };
    }
    handleNumberChange = (e,Typ) => {
        // Stellen Sie sicher, dass der Mindestwert 0 ist.
        const number = parseInt(e.target.value || 0, 10);
        wenn (istNaN(Zahl)) {
          zurückkehren;
        }
        lass Obj = {}
        Obj[`${type}`] = Zahl
        dies.triggerChange(Obj);
    };
    Triggeränderung = geänderterWert => {
        const { bei Änderung, Wert } = this.props;
        wenn (beiÄnderung) {
          beiÄnderung({
            ...Wert,
            ...geänderterWert,
          });
        }
      };
    turnIpPOS = (e,Typ)=>{
        lass self = dies;
         //Der linke Pfeil springt nach links und tut nichts if(e.keyCode === 37) {
          wenn(Typ === 0) {} sonst {
            self._refs[`refip_${type-1}`].current.focus();
          }
        }
        //Der rechte Pfeil, die Eingabetaste, die Leertaste und der Doppelpunkt springen alle nach rechts und der rechte tut nichts, wenn (e.keyCode === 39 || e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {
           wenn(Typ === 3) {} sonst {
            self._refs[`refip_${type+1}`].current.focus();
           }
        }
    }
    machen(){
        const { Wert } = this.props;
        zurückkehren (
            <Input.Group kompakter Klassenname = {styles.inputGroup}>
              <Eingabestil = {{ Breite: '24 %' }} Klassenname = {Stile.self_input} Ref = {this._refs.refip_0} Wert = {Wert.ip_0} Maximallänge = {3} Bei Änderung = {(e) => {this.handleNumberChange(e,'ip_0')}} Bei Schlüsselerhöhung = {(e) =>this.turnIpPOS(e,0)}/>
              <span className = {styles.dot} ></span>
              <Eingabestil = {{ Breite: '24 %' }} Klassenname = {Stile.self_input} Ref = {this._refs.refip_1} Wert = {Wert.ip_1} Maximallänge = {3} Bei Änderung = {(e) => {this.handleNumberChange(e,'ip_1')}} Bei Tastendruck = {(e) =>this.turnIpPOS(e,1)}/>
              <span Klassenname = {styles.dot}></span>
              <Eingabestil = {{ Breite: '24 %' }} Klassenname = {Stile.self_input} Ref = {this._refs.refip_2} Wert = {Wert.ip_2} Maximallänge = {3} Bei Änderung = {(e) => {this.handleNumberChange(e,'ip_2')}} Bei Tastendruck = {(e) =>this.turnIpPOS(e,2)}/>
              <span Klassenname = {styles.dot}></span>
              <Eingabestil = {{ Breite: '24 %' }} Klassenname = {Stile.self_input} Ref = {this._refs.refip_3} Wert = {Wert.ip_3} Maximallänge = {3} Bei Änderung = {(e) => {this.handleNumberChange(e,'ip_3')}} Bei Tastendruck = {(e) =>this.turnIpPOS(e,3)}/>
            </Eingabe.Gruppe>
        )
    }
   
}
Standard-IpInput exportieren;

.Eingabegruppe {
  Rand: 1px durchgezogen #d9d9d9;
  Rahmenradius: 2px;
  Übergang: alle 0,3 s;
  &:schweben {
    Rahmenfarbe: #45bbff;
    Rahmenbreite rechts: 1px !wichtig;
    Umriss: 0;
    Kastenschatten: 0 0 0 2px rgba (29, 165, 255, 0,2);
  }
  Textausrichtung: zentriert;
  .punkt {
    Breite: 3px;
    Höhe: 3px;
    Rand: 1px durchgezogen #000;
    Rahmenradius: 3px;
    Hintergrundfarbe: #000;
    Deckkraft: 0,5;
    Z-Index: 9;
    Position: relativ;
    oben: 21px;
  }
}
.self_input {
  Rand: keiner;
  Umriss: 0px;
  &:schweben {
    Kastenschatten: keiner;
  }
  &::Auswahl {
    Kastenschatten: keiner;
  }
  &:Fokus {
    Kastenschatten: keiner;
  }
}

IPInput importieren aus '../../public/IpInput';
<FormItem label="Subnetz-Gateway" {...formItemLayout}>
                {getFieldDecorator('Preis', {
                  Anfangswert: { ip_0: 255, ip_1: 235, ip_2: 255, ip_3: 255 },
                  Regeln: [{ validator: this.checkIp }],
                })(<IPInput />)}
 </FormItem>