この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML Webページ作成チュートリアル iframeタグを慎重に使用してください
>>: MySQL テーブルにはどのくらいの量のデータを保存できますか?
この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...
目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...
目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...
序文古いプロジェクトを引き継ぐ苦労 - MongoDB クラスターの学習と構築に関する前回の記事を読...
ins と del は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、...
序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...
ハードウェア ビュー コマンドシステム # uname -a # カーネル/オペレーティング システ...
このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後...
今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...
docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...
コード例: パブリッククラスJDBCDemo3 { パブリック静的voiddemo3_1(){ bo...
目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...
通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...