Question

我想在每次弹出窗口显示时取消选中所有复选框。已经为它编写了一个函数，它会在单击弹出的显示按钮时被调用，但之前选中的复选框仍然会被检查。在弹出窗口中，我有通过映射生成的带有li的ul。

我的功能是：

clearList() {
    var list_items = document.getElementById("bucket-list").getElementsByTagName("li");
    for(var i=0; i<list_items.length; i++) {
      list_items[i].getElementsByTagName("input").checked = false;
    }
  }

内部渲染功能：

<ul id="bucket-list">
              {this.state.buckets.map(function (bucket, i) {
                return (
                <li key={i}>
                  <input
                    type="checkbox"
                    value={bucket.id}
                    refs="status_changed"
                    onChange={self.onCheckUncheck.bind(self, "status_changed")} />
                  <label>{bucket.name}</label>
                </li>
                )
              })}
              </ul>

Answer 1

因为你是桶数组来提供复选框道具然后你可以添加你可以将checked属性添加到这个数组，并且只要你想清除，你只需要将这个属性修改为{{1} }，为方便起见，使用false等checkbox库，例如使用react-icheck进行安装，将其导入您的文件：npm install --save react-icheck 现在将import {Checkbox} from 'react-icheck'道具添加到checked数组，buckets，并用类似的代码替换你的代码：

checked:false

并清除复选框：

         <ul>
          {this.state.buckets.map(function (bucket, i) {
            return (
            <li key={i}>
              <Checkbox
                increaseArea="20%"
                label={bucket.name}
                name={bucket.id}
                onChange={this.handleBucketCheckChange}
                checked={bucket.checked}/>
            </li>
            )
          })}
          </ul>

取消选中React弹出窗口中的复选框

1 个答案: