onClick 未在 React.js 的 SweetAlert 模态内触发
onClick not firing withing a SweetAlert modal in React.js
我正在使用 SweetAlert 来处理我的 React.js 应用程序 中的模态,并且我有一个 functional component 用于此特定模式的正文。它使用一个简单的状态挂钩 increment/decrement 之间的数字值。问题是 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,它似乎一切正常。
我正在使用 SweetAlert 来处理我的 React.js 应用程序 中的模态,并且我有一个 functional component 用于此特定模式的正文。它使用一个简单的状态挂钩 increment/decrement 之间的数字值。问题是 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,它似乎一切正常。