onClick 在 React.js 中没有使用 SweetAlert 模式触发

Question

I'm using SweetAlert to take care of modals in my React.js application , and I have a functional component for the body of this particular modal. It uses a simple state hook to increment/decrement the number value in between. The issue is, that the onClick events are not firing at all. I've tried debugging this in a number of ways, unsuccessfully. Any help is appreciated.

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>
    )
}

Answer 1

After hours of research, I've come to the conclusion that this particular sweetalert package is broken, I recommend using SweetAlert2 where everything seems to be working fine.

https://sweetalert2.github.io/