血压类型数字组件enter跳下一个

src/components/MultSpread/index.jsx

@@ -27,6 +27,7 @@ class MultSpread extends Component{
     super(props);
     this.state = {
       editable: false,
+      numDoms:[]
     };
     this.$cont = React.createRef();
     this.changeToEdit = this.changeToEdit.bind(this);
@@ -41,11 +42,22 @@ class MultSpread extends Component{
     const hasAdd = showAdd?style['add']:'';
     return classNames(isSelected,hasAdd,orgBorder);
   }
+  saveDoms(it){
+    const doms = this.state.numDoms;
+    doms.push(it);
+    this.setState({
+      numDoms:doms
+    });
+  }
+  setNextFocus(i){
+    const doms = this.state.numDoms;
+    doms[i+1]&&doms[i+1].current.focus();
+  }
   getLabels(){
     const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;
     const {editable}= this.state;
     let show = false;
-    let inx = '';
+    let inx = '',count=0;
     const list = data.map((it,i)=>{
       inx=ikey+''+i;
       show = editable?false:showArr&&showArr[inx];
@@ -104,6 +116,10 @@ class MultSpread extends Component{
           return <NumberDrop prefix={it.labelPrefix}
                              suffix={it.labelSuffix}
                              placeholder={it.name}
+                             //inputRef = {this['$inp'+(count++)]}
+                             saveDoms={this.saveDoms.bind(this)}
+                             reFocus={this.setNextFocus.bind(this)}
+                             num = {count++}
                              min={min}
                              max={max}
                              show={show}

src/components/NumberDrop/index.jsx

@@ -39,7 +39,7 @@ class NumberDrop extends Component{
     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,12 @@ class NumberDrop extends Component{
     }
     e.stopPropagation();
   }
+  handleKeyDowm(e){
+    if(e.keyCode==13){
+      const {reFocus,num} = this.props;
+      reFocus&&reFocus(num);
+    }
+  }
   handleNumClick(e){     //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
     const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
     if(show) {
@@ -204,8 +210,7 @@ class NumberDrop extends Component{
   // }
   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 +257,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,6 +280,7 @@ 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()}