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

import React,{Component} from 'react';
import style from './index.less';

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);
  }
  render(){
    const select = this.handleSelect.bind(this);
    const {show} = this.props;      //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
    return <div className={style['panBox']}
                onBlur={(e)=>e.stopPropagation()} style={{display:show?'table':'none'}}
                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>
  }
}

export default NumberPan;