Reactポップアップのチェックボックスをオフにした

Question

ポップアップが表示されるたびにすべてのチェックボックスをオフにします。ポップアップショーボタンをクリックすると呼び出される関数を作成しましたが、以前にチェックされたチェックボックスはまだチェックされています。ポップアップでは私はマッピングによって生成された李のulを持っています。

My機能は次のとおりです。

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プロパティを追加することができます追加することができます配列を削除したい場合は、このプロパティをfalse、 に変更するだけでreact-icheckのようなcheckboxライブラリを使用し、例えばは、あなたのファイルへ インポート、それを：import {Checkbox} from 'react-icheck' は今、あなたbuckets配列、checked:false、 にchecked小道具を追加して、似たようなを使用してコードを置き換える：

  <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> 

とチェックボックスをオフにする：

clearList() { 
let localBucketsArray = [...this.state.buckets]; 

map(localBucketsArray, function(bucket,key){ 
    bucket.checked = false; 
}) 

    this.setState({buckets: localBuckets}) 
    }