Framework7 复选框不在 IOS 或 Android 上发出点击事件

Question

我在我的 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);
}

Answer 1

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

发生这种情况是因为您实际上没有单击复选框。只需使用 onChange 而不是 onClick，这将更加正确

Answer 3

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

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

<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

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

如果选择组中的另一个无线电，将触发更改，如果选择相同的无线电，将触发 li 的点击。小心双重事件：一个用于更改，一个用于单击。就我而言，这没问题，因为单击仅关闭了模式。

Answer 5

我在 React 中使用复选框时遇到了同样的问题。 onChange 事件没有触发。我必须将 'no-fastclick' class 添加到标签属性才能使其正常工作。

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

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

Framework7 复选框不在 IOS 或 Android 上发出点击事件

Framework7 checkboxes not emitting click event on IOS or Android

html-framework-7