Question

我有一个React App，它在移动设备和电脑上运行良好。我在material-ui tabs组件中使用'react-bootstrap'listgroup和modal。这一切都很好，直到几天前在移动设备上，模态停止渲染，列表项开始换行而不是填满整个屏幕。

pc上的

工作正常，如果我在VS Code chrome调试器中激活，则会出现问题。

我的代码在下面添加：

CatalogListItem.js

import React,{ Component } from 'react';
import {ListGroupItem} from 'react-bootstrap';

class CatalogListItem extends Component {

render() {
    return (

            <ListGroupItem bsStyle={(this.props.catalogItem.isCount)? null :"danger"}
                align="right"
                header={this.props.catalogItem.itemName + " - " + this.props.catalogItem.measureId.measureName}
                onClick={() => {this.props.onClickHandler(this.props.catalogItem)}}
                >
                <img src={this.props.catalogItem.itemPicPath}
                height="70" width="70" alt="item" align="left" />
                <br/>
                <span  align="right">
                        מלאי קבוע: {this.props.catalogItem.itemStock} , 
                        מחיר: {this.props.catalogItem.itemPrice[0].price} ש"ח 
                        פיקדון: {this.props.catalogItem.itemDeposit} ש"ח
                        <br/>
                        הנחה: {this.props.catalogItem.itemDiscount}%,
                        הנחה צוברת: {this.props.catalogItem.additionalDiscount}%
                </span>
            </ListGroupItem> 

    );
  }
 }

 export default CatalogListItem;

CatalogTabs.js

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import React,{Component} from 'react';
import {Tabs,Tab} from 'material-ui/Tabs';
import {List} from 'material-ui/List';
import PropTypes from 'prop-types';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';

import CatalogListItem from '../catalogPage/CatalogListItem';
import CatalogItemFormModal from './CatalogItemFormModal';


// eslint-disable-next-line
const propTypes = {
//tabsTitles: PropTypes.object.isRequired,  
pathName: PropTypes.string.isRequired
};

const fabStyle = {
bottom: 20,
left: 10,
position: 'fixed'
};

const emptyCatalogItem = {
"itemId": "",
"itemName": "",
"supplierId": {},
"measureId": {},
"itemStock": 0,
"itemPrice": [{price:0}],
"itemDeposit": 0,
"itemDiscount": 0,
"additionalDiscount": 0,
"itemPicPath": "http://freevector.co/wp-content/uploads/2012/04/70626-label-
beer-bottle.png",
"isCount": true

 }

 class CatalogTabs extends Component {

 constructor(props) {
  super(props);
  this.state = {focusedCatalogItem:emptyCatalogItem,
              showModal:false};
  }

 showModal(catalogItem){


this.setState({focusedCatalogItem:JSON.parse(JSON.stringify(catalogItem))});
this.setState({showModal: true});   
 }

 hideModal(){
  this.setState({showModal: false});   
 }

 Listitemsfactory(supplier){
      return(
        <div>       
        { this.props.catalogData.catalog
          .sort((a, b) => a.itemName.localeCompare(b.itemName))
          .map((catalogItem)=> {      
          if (supplier._id === catalogItem.supplierId._id)
             return <CatalogListItem key={catalogItem._id} 
                                     catalogItem={catalogItem}
                                     onClickHandler=
  {this.showModal.bind(this)} /> 
             return false;
          } 
        )} 
        </div>);   
 } 

  render(){
  return( 
    <div>
    <MuiThemeProvider>         
      <Tabs>
        {this.props.suppliersData.suppliers.map((supplier)=>
        <Tab label={(supplier.supplierName.length > 6)?
                      supplier.supplierName.substring(0,6)+"..."
                      :
                      supplier.supplierName}
                      key={supplier._id}>
          <List>
            {this.Listitemsfactory(supplier)}
          </List>
        </Tab>
        )}
      </Tabs> 

      <FloatingActionButton onClick={()=>this.showModal(emptyCatalogItem)} 
                                          style={fabStyle}>
                                        <ContentAdd/>
                    </FloatingActionButton>
      </MuiThemeProvider>           
      <CatalogItemFormModal  
          suppliers={this.props.suppliersData.suppliers}
          measures={this.props.measuresData}
          heading={"פרטי פריט"}
          onItemNameChange={this.onItemNameChange.bind(this)}
          onItemSupplierChange={this.onItemSupplierChange.bind(this)}
          onItemMeasureChange={this.onItemMeasureChange.bind(this)}
          onItemPriceChange={this.onItemPriceChange.bind(this)}
          onItemDepositChange={this.onItemDepositChange.bind(this)}
          onItemDiscountChange={this.onItemDiscountChange.bind(this)}
          onAdditionalDiscountChange={this.onAdditionalDiscountChange.bind(this)}
          onItemStockChange={this.onItemStockChange.bind(this)}
          onIsCountChange={this.onIsCountChange.bind(this)}
          onItemDelete={this.startDeleteItem.bind(this)}
          itemData = {this.state.focusedCatalogItem}
          showModal={this.state.showModal}  
          onHide={this.hideModal.bind(this)}
          onOk={this.startUpdateItem.bind(this)}/>

         </div>




   );}

   onItemNameChange(event,newValue){
  let item = this.state.focusedCatalogItem;
  item.itemName = newValue;
  this.setState({focusedCatalogItem:item});
   }

  onItemSupplierChange(event, key, payload){
   let item = this.state.focusedCatalogItem;
  item.supplierId._id = payload;
  this.setState({focusedCatalogItem:item});
  }

 onItemMeasureChange(event,key,payload){
   let item = this.state.focusedCatalogItem;
  item.measureId._id = payload;
  this.setState({focusedCatalogItem:item});
 }

    onItemPriceChange(event,newValue){
   let item = this.state.focusedCatalogItem;
     item.itemPrice = newValue;
    this.setState({focusedCatalogItem:item});
    }

  onItemDepositChange(event,newValue){
   let item = this.state.focusedCatalogItem;
   item.itemDeposit = newValue;
   this.setState({focusedCatalogItem:item});
  }

  onItemDiscountChange(event,newValue){       
  let item = this.state.focusedCatalogItem;
  item.itemDiscount = newValue;
   this.setState({focusedCatalogItem:item});
  }

 onAdditionalDiscountChange(event,newValue){     
  let item = this.state.focusedCatalogItem;
  item.additionalDiscount = newValue;
  this.setState({focusedCatalogItem:item});
 }

 onItemStockChange(event,newValue){
  let item = this.state.focusedCatalogItem;
  item.itemStock = newValue;
  this.setState({focusedCatalogItem:item});
  }

 onIsCountChange(isInputChecked){    
  let item = this.state.focusedCatalogItem;
  item.isCount = isInputChecked;
  this.setState({focusedCatalogItem:item});
 }

startUpdateItem(catalogItem){
   console.log("item that is sent to server:" + 
 JSON.stringify(catalogItem)); 
  let catalogForSend = JSON.parse(JSON.stringify(catalogItem));
  catalogForSend.supplierId = catalogItem.supplierId._id;
  catalogForSend.measureId = catalogItem.measureId._id;
   console.log("item that is sent to server:" + 
JSON.stringify(catalogForSend)); 
  this.props.updateCatalogItem(catalogForSend); 
 }

startDeleteItem(catalogItem){
   this.props.deleteCatalogItem(catalogItem);   
 }  

  }

  export default CatalogTabs;

CatalogPage.js

 import React, { Component } from 'react';
 import {bindActionCreators} from 'redux';
 import {connect,} from 'react-redux';

 import { ToastContainer } from 'react-toastify';

 import Header from '../common/Header';

 import CatalogTabs from './CatalogTabs';
 import LoadingIndicator from '../common/Loading';

 import {setFocusedCatalogItem,updateCatalogItem,deleteCatalogItem} from 
 '../../store/actions/catalogActions'


   // this class detirme what page to display - cataloglist or an item form
   // this is decided by the url - if provided an item id or not 
   class CatalogPage extends Component {

    render() {
     return (
       <div>   
           <Header pageTitle="קטלוג"
                   isUserLoggedIn = {this.props.userData.isUserLoggedIn}/>

                <CatalogTabs 
                    pathName={this.props.location.pathname} 
                    catalogData = {this.props.catalogData}
                    suppliersData = {this.props.suppliersData}
                    measuresData = {this.props.measuresData.measures}
                    userData = {this.props.userData}
                    setFocusedCatalogItem={this.props.setFocusedCatalogItem}
                    updateCatalogItem={this.props.updateCatalogItem}
                    deleteCatalogItem={this.props.deleteCatalogItem}/>

            <LoadingIndicator isLoading = 
     {this.props.catalogData.fetchingCatalogData}/>
           <ToastContainer/>    
        </div>
    );
   }
 }

 function mapStateToProps(state){
  return{
   userData: state.userData,
    catalogData: state.catalogData,
   suppliersData: state.suppliersData,
    measuresData: state.measuresData
  }

 }

 function matchDispachToProps(dispatch){

 return bindActionCreators({setFocusedCatalogItem:setFocusedCatalogItem,
                           updateCatalogItem:updateCatalogItem,
                           deleteCatalogItem:deleteCatalogItem},dispatch)
 }

 export default connect(mapStateToProps,matchDispachToProps)(CatalogPage);

反应bootstrap grouplist在移动chrome上渲染严重

0 个答案: