react键盘组件

index.jsx

import React, { useState } from 'react'
import './index.css'
const Keyboard = (props) => {
  const [key, setKey] = useState(undefined)
  const handleClick = (value) => {
    props.handleClick(props.value + value)
  }
  const handleDelete = () => {
    if (props.value) {
      props.handleDelete(props.value.slice(0, -1))
    }
  }
  const handleConfirm = () => {
    props.handleConfirm()
  }
  const keyboardList = () => {
    let list = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9']]
    return list.map((item, index) => {
      return <div className="keyboard-row" key={index}>
        {
          item.map((e, i) => {
            return <div
              key={i}
              className={["keyboard-key", key === e ? 'active-key' : null].join(' ')}
              onClick={() => handleClick(e)}
              onTouchStart={() => setKey(e)}
              onTouchEnd={() => setKey(undefined)}
            >{e}</div>
          })
        }
      </div>
    })
  }
  return (
    <>
      <div className="number-keyboard">
        {keyboardList()}
        <div className="keyboard-row">
          <div
            className={[
              'keyboard-key',
              'keyboard-delete',
              key === 'backspace' && props.value ? 'active-key' : null,
              props.value ? null : 'disabled'
            ].join(' ')
            }
            onClick={handleDelete}
            onTouchStart={() => setKey('backspace')}
            onTouchEnd={() => setKey(undefined)}
          >
            <span>← backspace</span>
          </div>
          <div
            className={["keyboard-key", key === '0' ? 'active-key' : null].join(' ')}
            onClick={() => handleClick('0')}
            onTouchStart={() => setKey('0')}
            onTouchEnd={() => setKey(undefined)}
          >0</div>
          <div
            className={[
              'keyboard-key',
              'keyboard-confirm',
              key === 'enter' && props.value ? 'active-key' : null,
              props.value ? null : 'disabled'
            ].join(' ')
            }
            onClick={handleConfirm}
            onTouchStart={() => setKey('enter')}
            onTouchEnd={() => setKey(undefined)}
          >
            <span>确定</span>
          </div>
        </div>
      </div>
    </>
  )
}
export default Keyboard

index.css

.number-keyboard {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.keyboard-row {
  display: flex;
  flex-direction: row;
}

.keyboard-key {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  height: 50px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.keyboard-key:last-child {
  border-right: none;
}

.keyboard-key.keyboard-delete {
  background-color: #f2f2f2;
}

.keyboard-key.keyboard-confirm {
  background-color: #4caf50;
  color: #fff;
}

.active-key {
  background-color: #ccc !important;
}

.disabled {
  opacity: .5;
}

页面使用

import React, { useState } from 'react'
import Keyboard from '../../components/T-Keyboard';
const Index = () => {
  const [value, setValue] = useState('')
  const handleClick = (value) => {
    setValue(value)
  }
  const handleDelete = (value) => {
    setValue(value)
  }
  const handleConfirm = () => {
    console.log(value);
  }
  return (
    <>
      <Keyboard
        value={value}
        handleClick={handleClick}
        handleDelete={handleDelete}
        handleConfirm={handleConfirm}
      ></Keyboard>
    </>
  )
}
export default Index 

效果如下