react + antd +ts实现IP输入框

代码小戳

已于 2022-08-26 15:56:32 修改

阅读量847

点赞数

分类专栏： antd 文章标签： react.js javascript 前端

于 2022-08-26 15:55:14 首次发布

本文链接：https://blog.csdn.net/qq_41856825/article/details/126545087

版权

antd 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述
使用方式

tsx

import { InputNumber, Input } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';

interface PriceInputProps {
  value?: string;
  onChange?: (value: string) => void;
  disabled?: boolean;
}

const PriceInput: React.FC<PriceInputProps> = ({
  value = '0.0.0.0',
  onChange,
  disabled = false,
}) => {
  const [numberArr, setNumberArr] = useState<string[]>(value?.split('.') || []);

  const triggerChange = (changedValue: string) => {
    onChange?.(changedValue);
  };

  const onNumberChange = (evalue: string, type: number) => {
    const copy = [...numberArr];
    copy[type] = evalue;
    setNumberArr(copy);
    triggerChange(copy.join('.'));
  };
  return (
    <Input.Group compact className={!disabled ? styles.inputGroup : styles.inputGroup_disable}>
      <InputNumber
        style={{ width: '24%' }}
        disabled={disabled}
        controls={false}
        value={numberArr[0]}
        className={styles.self_input}
        onChange={(e) => onNumberChange(e, 0)}
        min={'0'}
        max={'255'}
      />
      <span className={styles.dot} />
      <InputNumber
        type={'number'}
        style={{ width: '24%' }}
        disabled={disabled}
        controls={false}
        value={numberArr[1]}
        className={styles.self_input}
        onChange={(e) => onNumberChange(e, 1)}
        min={'0'}
        max={'255'}
      />
      <span className={styles.dot} />
      <InputNumber
        type={'number'}
        style={{ width: '24%' }}
        disabled={disabled}
        controls={false}
        value={numberArr[2]}
        className={styles.self_input}
        onChange={(e) => onNumberChange(e, 2)}
        min={'0'}
        max={'255'}
      />
      <span className={styles.dot} />
      <InputNumber
        type={'number'}
        style={{ width: '24%' }}
        disabled={disabled}
        controls={false}
        value={numberArr[3]}
        className={styles.self_input}
        onChange={(e) => onNumberChange(e, 3)}
        min={'0'}
        max={'255'}
      />
    </Input.Group>
  );
};

export default PriceInput;

css

.inputGroup {
  text-align: center;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  transition: all 0.3s;
  &:hover {
    border-color: #45bbff;
    border-right-width: 1px !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(29, 165, 255, 0.2);
  }
  .dot {
    position: relative;
    top: 15px;
    z-index: 9;
    width: 3px;
    height: 3px;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 3px;
    opacity: 0.5;
  }
}
.inputGroup_disable {
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  transition: all 0.3s;
  .dot {
    position: relative;
    top: 15px;
    z-index: 9;
    width: 3px;
    height: 3px;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 3px;
    opacity: 0.5;
  }
}
.self_input {
  border: none;
  outline: 0px;
  box-shadow: none;
  &:hover {
    box-shadow: none;
  }
  &::selection {
    box-shadow: none;
  }
  &:focus {
    box-shadow: none !important;
  }
}