Reactjs 在react-sortable中，触发onChange时，hoc-Input-wrapped将失去焦点

我正在模型视图中使用react sortable hoc， 但在我下面的组件中，输入字段在键入字符后失去焦点

使用onChange道具聚焦第2列的任何一行，在其上键入一个2位数字（例如“20”），然后在第一位数字之后（例如“2”之后）失去焦点

为什么会这样

主页组件

render() {
const SortableItem = sortableElement(({value,yourIndex}) =>{

       return ( 
        <Row xs="12">
          <Col xs="1">
            <FormGroup>
              <DragHandle/>
            </FormGroup>
          </Col>                       
          <Col xs="4">
            <FormGroup>
            { 
              this.state.MenuItems && this.state.MenuItems != null ?
                <Select 
                options={this.state.MenuItems}
                value={this.state.MenuItems.filter(option => option.value === value.menugroupsitemsitemid)}
                onChange={this.handelItemSelectChange(yourIndex)} />
              : <Select value={null} options={emptyVal} />
            }
            </FormGroup>
          </Col>
          <Col xs="2">
            <FormGroup>
              <Input
                className="form-control-alternative text-right"
                id="itemstepname"
                placeholder="Price"
                type="text"
                name="itemsstepsitemsprice"
                value={value.menugroupsitemsprice === undefined ? '0' : value.menugroupsitemsprice}
                onChange={(e) => this.handelInputPrice(yourIndex,value.menugroupsitemsitemid,e)}
              />
            </FormGroup>
          </Col>
          <Col xs="3">
            <FormGroup>
            { 
              this.state.TaxCode && this.state.TaxCode != null ?
                <Select
                placeholder="Tax"
                options={this.state.TaxCode}
                value={this.state.TaxCode.filter(option => option.value === value.menugroupsitemstaxcode)}
                onChange={(newValue) => this.handelTaxSelectChange(yourIndex,value.menugroupsitemsitemid,newValue)} />
              : <Select value={null} options={emptyVal} />
            }
            </FormGroup>
          </Col>
          <Col xs="2">
            <FormGroup>
            {
              value.menugroupsitemsitemid ? 
              <span className="link-button" onClick={this.getItemSteps(value.menugroupsitemsitemid)}><i className="fa fa-edit mr-2 text-red" aria-hidden="true"></i></span> : null
            }

            { this.state.menuGroupItem.length > 1 ?
              <span className="link-button" onClick={(e) => this.DecreaseItem(yourIndex,value.menugroupsitemsitemid)}><i className="fa fa-minus-circle mr-2 text-red" aria-hidden="true"></i></span>
              : null
            }
            {
              this.state.menuGroupItem.length === yourIndex + 1 ?
                <span className="link-button" onClick={this.IncrementItem}><i className="fa fa-plus-circle text-icon" aria-hidden="true"></i></span>
              : null
            }
            </FormGroup>
          </Col>
        </Row>
      )
    });

    const SortableItmList = sortableContainer(({items}) => {
      return (
        
        <Row>
          <Col lg="12">
            <FormGroup>
                <label
                  className="form-control-label"
                  htmlFor="input-itemdescription"
                >
                  Items
                </label>
              {items.map((value, index) => (
                  <SortableItem key={`item-${index}`} index={index} value={value} yourIndex={index} />
              ))}
            </FormGroup>
          </Col>
        </Row>

      )  
    });
    
    return (
       <Row>
                          <Modal
                              className="modal-dialog-centered"
                              isOpen={this.state.itemModal}
                              toggle={() => this.toggleModal("itemModal")}
                          >
                            <div className="modal-header">
                              <h2 className="modal-title" id="modal-title-default">
                                {this.state.menutypename}
                              </h2>
                            </div>
                            {this.state.itmModelError ? (
                              <div className="model-alert">
                                <Alert color="danger" isOpen={this.state.visible}>{this.state.itmModelError}</Alert>
                              </div>
                            ) : null}
                            <div className="breadcrumb">
                              <li> <span className="menu-ol-list">{this.state.groupname}</span> </li> 
                            </div>
                            <div className="modal-body">
                              <SortableItmList axis="y" helperClass="sortable-list-tab" lockAxis="y" distance={0} items={this.state.menuGroupItem} onSortEnd={this.onSortEnd.bind(this)} useDragHandle />
                            </div>
                            <div className="modal-footer">
                              <Button className="ml-auto" onClick={() => this.toggleModal("itemModal")} color="primary" type="button">
                                Go Back
                              </Button>
                            </div>
                          </Modal>
                        </Row>
    )
}

render（）{
const SortableItem=sortableElement（（{value，yourIndex}）=>{
报税表（
{ 
this.state.MenuItems&&this.state.MenuItems！=null？
option.value==value.menugroupsitemsitemid）}
onChange={this.handleitemselectchange（yourIndex）}/>
: 
}
this.handleInputPrice（yourIndex，value.menugroupsitemsitemid，e）}
/>
{ 
this.state.TaxCode&&this.state.TaxCode！=null？
option.value==value.menugroupsitemstaxcode）}
onChange={（newValue）=>this.handelTaxSelectChange（yourIndex，value.menugroupsitemsitemid，newValue）}/>
: 
}
{
value.menugroupsitemsitemid？
：null
}
{this.state.menuGroupItem.length>1？
this.DecreaseItem（yourIndex，value.menugroupsitemsitemid）}>
：null
}
{
this.state.menuGroupItem.length==yourIndex+1？
：null
}
)
});
const SortableItmList=sortableContainer（（{items}）=>{
返回(
项目
{items.map（（值，索引）=>(
))}
)  
});
返回(
this.toggleModal（“itemModal”）}
>
{this.state.menutypename}
{this.state.itmmodeleror(
{this.state.itmmodeleror}
)：null}
{this.state.groupname}
this.toggleModal（“itemModal”）}color=“primary”type=“button”>
回去
)
}