我正在从事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}/>
<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}
/>