通过 Css 的 Grid 布局实现数据键盘

虽说不要重复造轮子，但 Ant-Design-Mobile 中的 NumberKeyboard 数字键盘点击没反应，只好自己写一个了，无耐~

思路：每次点击数字，执行 addNumber 函数，该函数会将该数字压入一个数组中
如果点击的第一个是小数点，或者在数组中已经出现过小数点了，则直接返回 addNumber 函数，不执行后面的结果

react 中要使用 setinputNumber([...inputNumber])，视图才会重新渲染内容

import { TextDeletionOutline } from 'antd-mobile-icons'
import s from './style.module.less';

export default () => {
  const [inputNumber, setinputNumber] = useState([])
  function addNumber(a) {
    if (a.target.innerText === '.') {
      if (!inputNumber.length) return
      const decimalPointIndex = inputNumber.findIndex(item => item == '.')
      if (decimalPointIndex !== -1) return
    }
    inputNumber.push(a.target.innerText)
    setinputNumber([...inputNumber])
  }
  function deleteNumber() {
    inputNumber.pop()
    setinputNumber([...inputNumber])
  }
  return (
    <div>
      <div className={s.money}>
        <span className={s.sufix}>¥</span>
        <span className={s.amount}>{inputNumber}</span>
      </div>
      <div className={s.keyBoard}>
        <div onClick={addNumber}>1</div>
        <div onClick={addNumber}>2</div>
        <div onClick={addNumber}>3</div>
        <div onClick={deleteNumber}><TextDeletionOutline /></div>
        <div onClick={addNumber}>4</div>
        <div onClick={addNumber}>5</div>
        <div onClick={addNumber}>6</div>
        <div className={s.confirm} onClick={() => console.log(inputNumber)}>确定</div>
        <div onClick={addNumber}>7</div>
        <div onClick={addNumber}>8</div>
        <div onClick={addNumber}>9</div>
        <div className={s.zero} onClick={addNumber}>0</div>
        <div onClick={addNumber}>.</div>
      </div>
    </div>
  )
}

.money {
  padding-bottom: 12px;
  border-bottom : 1px solid #e9e9e9;
  margin        : 0 24px;

  .sufix {
    font-size  : 36px;
    font-weight: bold;
  }

  .amount {
    font-size   : 40px;
    padding-left: 10px;
  }
}

.key-board {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);

  >div {
    border         : 0.1px solid rgba(92, 175, 162, 0.1);
    padding        : 5px 0px;
    border-radius  : 3px;
    font-size      : 22px;
    display        : flex;
    justify-content: center;
    align-items    : center;

    &:hover {
      cursor: pointer;
    }

    &:active {
      background-color: rgb(230, 230, 230, 0.1);
    }
  }

  .confirm {
    grid-column-start: 4;
    grid-column-end  : 5;
    grid-row-start   : 2;
    grid-row-end     : 5;
    background-color : rgb(21, 146, 127);
    color            : #fff;

    &:active {
      background-color: rgb(21, 146, 127, 0.2);
    }
  }

  .zero {
    grid-column-start: 1;
    grid-column-end  : 3;
  }
}