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

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

class NumberPan extends Component{
  constructor(props){
    super(props);
    this.state = {
      value:''
    }
  }
  handleSelect(e){
    e.stopPropagation();
    const text = e.target.innerText;
    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.bind(this); 
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(
       <div className={style['panBox']} 
                style={this.getStyle()}
                onBlur={(e)=>e.stopPropagation()} 
                onDoubleClick={(e)=>e.stopPropagation()}>
      <table className={style['pan']} >
        <tr>
          <td><button onClick={select}>1</button></td>
          <td><button onClick={select}>2</button></td>
          <td><button onClick={select}>3</button></td>
          <td><button onClick={select}>/</button></td>
        </tr>
        <tr>
          <td><button onClick={select}>4</button></td>
          <td><button onClick={select}>5</button></td>
          <td><button onClick={select}>6</button></td>
          <td><button onClick={this.handleBack.bind(this)}>回退</button></td>
        </tr>
        <tr>
          <td><button onClick={select}>7</button></td>
          <td><button onClick={select}>8</button></td>
          <td><button onClick={select}>9</button></td>
          <td><button onClick={this.handleClear.bind(this)}>清空</button></td>
        </tr>
        <tr>
          <td><button onClick={select}>.</button></td>
          <td><button onClick={select}>0</button></td>
          <td><button onClick={select}>～</button></td>
          <td><button onClick={this.handleClose.bind(this)}>确定</button></td>
        </tr>
      </table>
      </div>
    ,domNode)
  }
}

export default NumberPan;