如何解决onClick 不使用 React.js 中的 SweetAlert 模式触发
我正在使用 SweetAlert 来处理我的 React.js 应用程序 中的模态,并且我有一个用于主体的 功能组件这个特殊的模态。它使用一个简单的状态挂钩来增加/减少两者之间的数值。问题是,onClick 事件根本没有触发。我已经尝试以多种方式调试它,但没有成功。任何帮助表示赞赏。
export default class FoodItem extends React.Component{
constructor(props){
super(props);
this.state ={
loading:false,addedPrice:0
}
this.openOptions = this.openOptions.bind(this);
}
componentDidMount(){
this.setState({
addedPrice:this.props.cena
});
}
openOptions(){
swal({
title:this.props.jedlo,buttons:{
cancel:{
text:'Zrusit',value:null,visible:true,closeModal:true
},confirm:{
text:'Pridat ' + this.state.addedPrice,value:true,closeModal:true
}
},content:(
<div>
<ModalBody />
</div>
)
});
}
render(){
return(
<button className='food-item' type="button" onClick={this.openOptions}>
<p className='food_text'>{this.props.jedlo}</p>
<p className='price_text'>{this.props.cena} €</p>
</button>
)
}
}
function ModalBody(){
const [num,changeNum] = useState(1);
return(
<div className='increaseNumItems'>
<button type='button' className='btnValueChange' onClick={() => changeNum(num - 1)}>-</button>
<p id='valueTimes'>{num}</p>
<button type='button' className='btnValueChange' onClick={() => changeNum(num + 1)}>+</button>
</div>
)
}
解决方法
经过数小时的研究,我得出的结论是,这个特殊的 Sweetalert 包已损坏,我建议使用 SweetAlert2,因为它似乎一切正常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。