javascript - 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,
visible: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 ,它似乎一切正常。
推荐阅读
- java - 如何在Angular post方法中传递json数组以及如何在Api中获取这个数组?
- c# - 将 ClaimsIdentity 添加到 ClaimsPrincipal - JwtBearer
- objective-c - UILabel 第一个文本与第二个文本重叠
- c++ - Visual Studio 项目已过期,您要重建吗?
- php - 瑞士锦标赛。团队对抗多轮不重复和有序
- reactjs - 使用 React 创建滚动新闻源
- python - 在 python 中简化 Excel 单元格名称的排序
- javascript - 我如何使用正则表达式验证这个通过电子邮件发送的“email@-domain.com”
- amazon-web-services - Amazon S3 文件过期控制
- laravel - Laravel:在侦听器上的字符串上调用成员函数 send()