Question

我在React应用程序中使用Framework7复选框。我的onClick设置<input type="checkbox">，每次选中复选框时都会更新我的应用状态。它在桌面浏览器上运行良好，但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);
}

Answer 1

使用React复选框时遇到了同样的问题。 onChange事件没有被解雇。我不得不添加＆＃39; no-fastclick＆＃39; class属于label属性以使其工作。

<label htmlFor={htmlID} className="label-checkbox item-content no-fastclick">

这里的解决方案帮助了我：http://forum.framework7.io/#!/getting-started:checkbox-not-binding-to-ng

Answer 2

无论出于何种原因，单击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);
}

Answer 3

问题仍然存在，找不到我的问题的解决方案。我在framework7中使用angularJs。问题是当框架更改值时，范围模型值不会反映复选框检查状态。

angularJS解决方案可以通过添加停止传播到框架处理程序的onclick事件来实现。然后添加ng-click事件以切换模型的值。中提琴！角度范围反映了正确的值，框架复选框也是如此。

<label class="label-checkbox item-content" onclick="event.stopPropagation(); return false;" ng-click="models.tss[$index] = !models.tss[$index]">
     <input type="checkbox" ng-model="models.tss[$index]">
      <div class="item-media">
          <i class="icon icon-form-checkbox"></i>
      </div>
      <div class="item-inner">
          <div class="item-title">{{ key }}</div>
      </div>
</label>

Answer 4

这是因为您实际上没有点击复选框。只需使用onChange代替onClick，这将更加正确

Answer 5

我能做的最好的事情是为收音机的li容器元素添加一个click处理程序，为输入本身添加一个更改处理程序。

如果选择了该组中的另一个无线电，则会触发更改，如果选择相同，则会触发li的点击。小心双重事件：一个用于更改，一个用于单击。在我的情况下，没有问题，因为点击只关闭了模态。

Framework7复选框不会在IOS或Android

5 个答案: