|
@@ -32,14 +32,14 @@ class NumberDrop extends Component{
|
|
|
this.$pre = React.createRef();
|
|
|
this.$suf = React.createRef();
|
|
|
this.$cont = React.createRef();
|
|
|
- this.select = this.select.bind(this);
|
|
|
+ //this.select = this.select.bind(this);
|
|
|
this.numInpBlur = this.numInpBlur.bind(this);
|
|
|
this.handleSpanInp = this.handleSpanInp.bind(this);
|
|
|
this.handleNumClick = this.handleNumClick.bind(this);
|
|
|
this.handleNumFocus = this.handleNumFocus.bind(this);
|
|
|
this.handleBlur = this.handleBlur.bind(this);
|
|
|
this.changeToEdit = this.changeToEdit.bind(this);
|
|
|
- // this.handleKeyDowm = this.handleKeyDowm.bind(this);
|
|
|
+ this.handleKeyDowm = this.handleKeyDowm.bind(this);
|
|
|
this.beyondArea = this.beyondArea.bind(this);
|
|
|
}
|
|
|
select(text){ //选中键盘上数字事件
|
|
@@ -93,6 +93,13 @@ class NumberDrop extends Component{
|
|
|
}
|
|
|
e.stopPropagation();
|
|
|
}
|
|
|
+ handleKeyDowm(e){
|
|
|
+ if(e.keyCode==13){
|
|
|
+ const {reFocus,num,handleHide} = this.props;
|
|
|
+ reFocus&&reFocus(num);
|
|
|
+ handleHide && handleHide();
|
|
|
+ }
|
|
|
+ }
|
|
|
handleNumClick(e){ //数字框不可编辑的状态时点击事件,点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
|
|
|
const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
|
|
|
if(show) {
|
|
@@ -191,21 +198,9 @@ class NumberDrop extends Component{
|
|
|
const {handleHide} = this.props;
|
|
|
handleHide&&handleHide();
|
|
|
}
|
|
|
- // handleKeyDowm(e){
|
|
|
- // handleEnter();
|
|
|
- //只能输入数字
|
|
|
- /*const key = e.key;
|
|
|
- const ctrlOn = e.ctrlKey;
|
|
|
- const isCopyPaste = ctrlOn&&(key=='v'||key=='c');
|
|
|
- if((!/[0-9|.|~|\/]/.test(key)&&key.length==1&&!isCopyPaste)){
|
|
|
- e.preventDefault();
|
|
|
- return false;
|
|
|
- }*/
|
|
|
- // }
|
|
|
getClasses(){ //整个标签是否有值的状态
|
|
|
const {hideTag,placeholder,value,isImports} = this.props;
|
|
|
- const $span = this.$span.current;
|
|
|
- const val = value;//$span&&$span.innerText.trim()||value;
|
|
|
+ const val = value;
|
|
|
const blueBorder = this.state.editable?style['blue-border']:'';
|
|
|
const isSelected = val&&val!=placeholder?style['selected']:style['container'];
|
|
|
const orgBorder = isImports&&!(val&&val!=placeholder)?style['orange-border']:'';
|
|
@@ -252,6 +247,11 @@ class NumberDrop extends Component{
|
|
|
//设置最小宽度避免输入后宽度跳动
|
|
|
const spanWidth = window.getComputedStyle(this.$span.current).width;
|
|
|
this.$span.current.style.minWidth=spanWidth;
|
|
|
+ //保存输入框dom以便聚焦
|
|
|
+ const {saveDoms,num} = this.props;
|
|
|
+ //console.log(num);
|
|
|
+ saveDoms&&saveDoms(this.$span);
|
|
|
+ //console.log(this.props.inputRef)
|
|
|
}
|
|
|
render(){
|
|
|
const {prefix,suffix,show,value,handleHide,allClick} = this.props;
|
|
@@ -270,12 +270,13 @@ class NumberDrop extends Component{
|
|
|
contentEditable={true}
|
|
|
style={{minWidth:'10px',display:'inline-block',textAlign:'center'}}
|
|
|
ref = {this.$span}
|
|
|
+ onkeydown={this.handleKeyDowm}
|
|
|
onBlur={this.numInpBlur}
|
|
|
onInput={this.handleSpanInp}
|
|
|
className={this.getSpanClass()}
|
|
|
> {value||placeholder}</span>
|
|
|
<span ref = {this.$suf}> {suffix}</span>
|
|
|
- <NumberPan handleSelect={(text)=>this.select(text)}
|
|
|
+ <NumberPan handleSelect={this.select.bind(this)}
|
|
|
onClose={handleHide}
|
|
|
show={show}
|
|
|
toClear={!hasSelect}
|