React.js Gird 布局编写键盘组件

<div className="keyboard-wrapper" >
  {
    keyboardArr.map((item) => {
      return (
        <div onClick={() => onClick(item)} key={item}>{item}</div>
      )
    })
  }
</div>

.keyboard-wrapper {
  position: fixed;
  width: 100%;
  height: 72vw;
  background-color: #242424;
  bottom: 0;
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
  color: #ffffff;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 2.6667vw;
  text-align: center;
  align-items: center;
  font-weight: 500;
  font-size: larger;
}

outline-style: none ;

border: 0px;

caret-color: #576b21;

import React, { useState } from 'react';
import ReactDom from 'react-dom';

const keyboardArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '<']
const Test = function () {
  const [value, setValue] = useState('')
  const [show, setShow] = useState(false)

  const onChange = (e) => {
    setValue(e.target.value)
  }
  const onClick = (item) => {
    if (item === '<') {
      const _arr = value.split('')
      _arr.pop()
      setValue(_arr.join(''))
      return
    }
    setValue(value.concat(item))
  }
  const onFocus = () => {
    setShow(true)
  }
  return (
    <>
      <div className="input-box">
        USD
        <input value={value} onChange={onChange} onFocus={onFocus} />
      </div>
      {
        show && (
          <div className="keyboard-wrapper animate__animated animate__slideInUp" >
            {
              keyboardArr.map((item) => {
                return (
                  <div onClick={() => onClick(item)} key={item}>{item}</div>
                )
              })
            }
          </div>
        )
      }
    </>
  )
};
ReactDom.render(<Test />, document.getElementById('app'));