程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮?

开发过程中遇到有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮的问题如何解决?下面主要结合日常开发的经验,给出你关于有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮的解决方法建议,希望对你解决有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮有所启发或帮助;

我正在尝试在 ReactJs 中创建一个 Swal 警报,该警报必须包含一个带有继续和取消按钮的输入字段。这是我现在的代码:

              swal({
                    icon: "warning",text: 'Are you sure you want to conTinue? This operation is not reversible',content: {
                        element: "input",attributes: {
                          placeholder: title + " reason",},}).then(comment => {
                    if (comment === null || comment === ''){
                        swal({icon: 'error',text: 'You need to type the cancellation reason'});
                        return false
                    }
                })

此代码仅创建了一个“确定”按钮,我在 comment 变量中获得了用户的输入,但我需要添加一个“继续”按钮和一个“取消”按钮才能离开警报。我尝试在 swal 选项中添加 button 参数,这会创建按钮,但我无法从用户那里获得输入。

我还尝试在内容中添加原始 HTML 并使用 handle 方法获取输入,但到目前为止我还没有做到这一点。

也许这个解决方案很简单,但我无法得到它。非常感谢帮助

解决方法

我找到了解决这个问题的方法,以防万一有人不得不做类似的事情。我刚刚通过执行 document.createElement('input') 创建了输入,然后我根据用户点击了继续或取消获得了值:

              const cancellation_reason = document.createElement('input');
              swal({
                    icon: "warning",text: 'Are you sure you want to conTinue? This operation is not reversible',content: {
                        element: cancellation_input,attributes: {
                          placeholder: title + " reason",},buttons: {
                        conTinue: 'conTinue',cancel: 'cancel'
                    }
                    
                }).then(option => {
                    switch (option){
                        case 'conTinue':
                            if (cancellation_input.value === null || cancellation_input.value === ''){
                                swal({icon: 'error',text: 'You need to type the cancellation reason'});
                                return false
                            }
                            prop(runID,null,path,cancellation_input.value).then(showMesaggE);
                            break;
                        case 'cancel':
                            break;
                    }
                })

大佬总结

以上是大佬教程为你收集整理的有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮全部内容,希望文章能够帮你解决有没有办法在Sweetalert,Reactjs中添加带有输入字段的取消按钮所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: