html-framework-7 – Framework7复选框不会在IOS或Android上发出点击事件

html-framework-7 – Framework7复选框不会在IOS或Android上发出点击事件,第1张

概述我在我的React应用程序中使用Framework7复选框.我在< input type =“checkbox”>上设置了onClick.每次选中复选框时都会更新我的应用状态.它在桌面浏览器上运行良好,但onClick事件不在移动设备上注册.有没有人遇到过Framework7这个问题?请参阅下面的示例代码(为简洁起见,删除了不必要的代 我的意见: <label className="label-c 我在我的React应用程序中使用Framework7复选框.我在< input type =“checkBox”>上设置了onClick.每次选中复选框时都会更新我的应用状态.它在桌面浏览器上运行良好,但onClick事件不在移动设备上注册.有没有人遇到过Framework7这个问题?请参阅下面的示例代码(为简洁起见,删除了不必要的代

我的意见:

<label classname="label-checkBox item-content">  <input classname="fileChkBoxes" type="checkBox" name="chkname" onClick={this.handleChange.bind(this)}/>    <div classname="item-media">       <i classname="icon icon-form-checkBox"></i>    </div></label>

我的onClick函数(简化):

handleChange() {    let filesChecked = [];    let fileinput = document.getElementsByClassname('fileChkBoxes');    for (let i = 0; fileinput[i]; ++i) {        if (fileinput[i].checked) {            filesChecked.push(fileinput[i].value);        }    }    ProjectActions.batchDelete(filesChecked);}
解决方法 无论出于何种原因,单击Framework7输入[复选框]不会触发iOS / AndroID中的onChange.相反,在获取表单值之前,在标签上设置onClick并等待F7更改表单对象.在桌面上,onClick适用于输入字段,但对代码的以下更改将使其在两者上都能正常工作.您必须传入包含复选框的formID,并且可以通过将复选框组名称设置为变量来使其更加通用.

HTML:

<label classname="label-checkBox item-content" onClick={() => this.handleChange(formID,'chkname')}>  <input classname="fileChkBoxes" type="checkBox" name="chkname"/>    <div classname="item-media">       <i classname="icon icon-form-checkBox"></i>    </div></label>

Js(ES6):

handleChange(formID,checkBoxname) {    setTimeout( () => {        var form = new Framework7().formToJsON('#' + formID);                        if (form && form[checkBoxname] != null) ProjectActions.batchDelete(form[checkBoxname]);    },100);}
总结

以上是内存溢出为你收集整理的html-framework-7 – Framework7复选框不会在IOS或Android上发出点击事件全部内容,希望文章能够帮你解决html-framework-7 – Framework7复选框不会在IOS或Android上发出点击事件所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1045250.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存