newICSS/src/common/components/NumberPan/index.jsx

import React,{Component} from 'react';
import style from './index.less';
import ReactDom from "react-dom";
import backspace from '../../images/backspace.png'

class NumberPan extends Component{
  constructor(props){
    super(props);
    this.state = {
      value:''
    }
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(e){
    e.stopPropagation();
    const text = e.target.innerText || e.target.innerHTML;
    const value = this.props.toClear?'':this.state.value;     //键盘输入替换已有的值
    const onSelect = this.props.handleSelect;
    this.setState({
      value: value+text
    });
    onSelect&&onSelect(value+text);
  }
  handleClear(e){
    e.stopPropagation();
    const onSelect = this.props.handleSelect;
    this.setState({
      value: ''
    });
    onSelect&&onSelect('');
  }
  handleClose(e){
    e.stopPropagation();
    //关闭弹窗
    const {onClose} = this.props;
    onClose&&onClose();
  }
  handleBack(e){
    e.stopPropagation();
    const value = this.state.value;
    const len = value.length-1;
    if(len<0){
      return;
    }
    const onSelect = this.props.handleSelect;
    const text = value.substring(0,len);
    this.setState({
      value:text
    });
    onSelect&&onSelect(text);
  }
  getStyle(){
    const {left,top,show} = this.props;
    return {
      /*left:left?left+'px':'0',
      top:top?top+'px':'0',*/
      display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
    }
  }
  render(){
    const select = this.handleSelect;
    const domNode = document.getElementById('root');
    return <div className={style['panBox']}
                style={this.getStyle()}
                onBlur={(e)=>e.stopPropagation()} 
                onDoubleClick={(e)=>e.stopPropagation()}
                onClick={(e)=>e.stopPropagation()}>
      <table className={style['pan']} >
        <tr>
          <td><button onMouseUp={select}>1</button></td>
          <td><button onMouseUp={select}>2</button></td>
          <td><button onMouseUp={select}>3</button></td>
          <td><button onMouseUp={select}>/</button></td>
        </tr>
        <tr>
          <td><button onMouseUp={select}>4</button></td>
          <td><button onMouseUp={select}>5</button></td>
          <td><button onMouseUp={select}>6</button></td>
          <td><button onMouseUp={this.handleBack.bind(this)}><img src={backspace} onClick={this.handleBack.bind(this)} /></button></td>
        </tr>
        <tr>
          <td><button onMouseUp={select}>7</button></td>
          <td><button onMouseUp={select}>8</button></td>
          <td><button onMouseUp={select}>9</button></td>
          <td><button onMouseUp={this.handleClear.bind(this)} className={style['clearN']}>清空</button></td>
        </tr>
        <tr>
          <td><button onMouseUp={select}>.</button></td>
          <td><button onMouseUp={select}>0</button></td>
          <td><button onMouseUp={select}>～</button></td>
          <td><button onMouseUp={this.handleClose.bind(this)} className={style['confirm']}>确定</button></td>
        </tr>
      </table>
      </div>
  }
}

export default NumberPan;