3

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

5 回答 5

6

在使用带有 React 的复选框时，我遇到了同样的问题。onChange 事件未触发。我必须在标签属性中添加“no-fastclick”类才能使其工作。

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

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

于 2017-10-15T18:57:59.907 回答
1

问题仍然存在，我的问题没有找到解决方案。我正在使用带有 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>
于 2017-03-28T18:52:49.533 回答
1

无论出于何种原因，在 iOS/Android 中单击 Framework7 输入[复选框] 都不会触发 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);
}
于 2016-02-18T20:54:47.333 回答
0

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

于 2016-02-22T22:43:01.303 回答
0

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

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

于 2017-06-28T00:40:42.533 回答