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,它似乎一切正常。

https://sweetalert2.github.io/