在Safari浏览器中,ReactJS setState在子组件中不起作用

时间:2019-01-10 05:53:23

标签: reactjs

我正在从事ReactJS项目,在其中创建了Parent和Child组件。我正在更新子组件的状态,在其他浏览器中它的工作方式类似于魅力,但是在safari中,状态不会在safari浏览器中得到更新。 我真的不明白为什么在其他浏览器给出所需结果时会发生这种情况。 提前谢谢。

这是我的代码:

子组件

import React,{Component} from 'react'
import './PaxDetails.css';

class AdditionalPax extends Component {
    state = {
        value: 0, 
        disablebutton:false, 
        maxPerBook:this.props.maxPerBook ,
        usedQuota:this.props.usedQuota,
        quota:this.props.quota,
        maxQuota:this.props.balance_pax,
        min:this.props.min,
        max:this.props.max
    }
    handleIncreement = (name,data)  => { 
        // console.log(data);
       let {quota,usedQuota,maxPerBook} =this.state;
       let val1 = quota-usedQuota,val2,maxQutVal=0;
       var count = this.state.value;
       if(data.pax_type!=='ADULT' || data.pax_type!=='CHILD' || data.pax_type!=='INFANT'){
        maxQutVal = this.props.balance_pax;
        var maxPackage = this.props.balance_package;
        if(data.minimum>0 && count===0){
            count =data.minimum;
            console.log('if1('+data.minimum>0 +'&&'+ count===0+')');
        }
        else{
            count = count + 1;
            // console.log(count = count + 1);
            console.log(count );
        }
        if(count>maxPackage){
            count = maxPackage;
            console.log('if(2'+count+'>'+maxPackage+')')
        }
       }else{
            count= count + 1;
           console.log('else2 count = count+1: '+count);
       }
    var finQuota;
    var FirstVal = this.state.quota - this.state.usedQuota;
    var SecondVal = this.state.maxPerBook; 
        this.setState({
            value:count
        });
        this.props.myFun(name,data,count);
        // this.props.countValuesIncre();
        console.log("State: " +this.state.value)
}

handleDecreement = (name,data)  => {    
    this.setState({
        disablebutton:false
    })
    var count = this.state.value;
    count= count -1;
    if(data.minimum>0 && count<data.minimum){
        count =0;

    }else{
        if(count<1){
            count = 0
        } 
    }

    this.setState({value:count});
    this.props.decrement(name,data,count);
    this.props.countValuesDecre();
}

formatThousands =(n, dp) => {
    var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
    while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
    return s.substr(0, i + 3) + r + (d ? '.' + Math.round(d * Math.pow(10,dp||2)) : '');
  }


render(props) {
    return (
        <div className={"row mx-0 " +(this.props.isPaxInvalid? "isPaxInvalid":'')}>
        <div className={'col-sm-3 border '+(this.props.it.pax_type==='ADULT' || this.props.it.pax_type==='CHILD' || this.props.it.pax_type==='INFANT'?'':'p-2')}>
        <label style={{ display:"flex" }} className='mt-2'>
        <button id="subs" onClick ={ () => this.handleDecreement(this.props.it.pax_type,this.props.it)} className="pull-left btnMinus"><i className='fa fa-minus'></i></button>
        <input type="text" name={this.props.it.pax_type} value={this.state.value} className="additoinalTextBox form-control pull-left" id="noOfRoom" readOnly={true}/>&nbsp;
        <button type="button" onClick={()=>this.handleIncreement(this.props.it.pax_type,this.props.it)} id="adds" disabled ={this.props.standardPaxDisable} className="btnPlus" ><i className='fa fa-plus'></i></button>
        </label>
        </div>
        <div className='col-sm-9 border p-2'>
            <h5 className='addProductRightHead'>{this.props.it.pax_type} <span className='productAmt'> ({this.props.currency} {this.formatThousands(this.props.it.amount)}) </span></h5>
            <p className='Remark'>Age {this.props.it.age_from}-{this.props.it.age_to}</p>
            {this.props.it.pax_type==='ADULT' || this.props.it.pax_type==='CHILD' || this.props.it.pax_type==='INFANT'?'':<p className='paxCountClass'>Minimum Pax {this.props.it.minimum}</p>}
        </div>
        </div>
    )
}
}

    export default AdditionalPax;

父项:

 <AdditionalPax
                maxQuota={this.state.standardPaxMAx}
                min={item.minimum}
                max={item.maximum}
                it ={item}
                totalPax={paxTotal}
                myFun={this.incrementCounterPax} 
                decrement={this.decrementCounterPax}
                key={item.id}
                addiValue={0}
                currency={this.state.currency}
                usedQuota={this.state.used_quota} 
                quota={this.state.quota} 
                balance_pax={this.state.balance_pax}
                balance_package={item.balance_package} 
                maxPerBook ={item.max_per_booking}
                countValuesIncre= {this.handleCountValuesIncrement}
                countValuesDecre = {this.handleCountValuesDecrement}
                standardPaxDisable={this.state.standardPaxDisable}
                isPaxInvalid={this.state.isPaxInvalid}
            />

0 个答案:

没有答案