チェックボックスの値に一意の配列ベースを生成する

Question

私はチェックボックスがほとんどないので、チェックボックスにチェックマークが付いていれば、ユニークな配列リストベースを構築し、チェックボックスがオンの場合はリストにプッシュするリスト、それをリストから削除します。

http://jsbin.com/bojinudelo/edit?js,console,output

以下の私のコードの問題は何ですか？

generateFilter = (e) => { 

    let temp = []; 
    temp = this.state.arr; 

    if(temp.indexOf(this.state.arr) > -1){ 
     delete temp[e.target.name] 
    }else{ 
     temp.push(e.target.name); 
    } 

    this.setState({arr:temp}) 
    console.log(this.state.arr) 
    } 

    render() { 
    return (  
     <div> 
     <input onChange={this.generateFilter} type="checkbox" name="apple"/> 
     <input onChange={this.generateFilter} type="checkbox" name="samsung"/> 
     </div>  
    ); 
    } 

Answer 1

理由は、あなたが間違っている項目のインデックスをチェックし、代わりのthis.state.arrのインデックスを確認し、e.target.valueのインデックスをチェックするだけでなく、間違った方法で削除されている、です。

tempはではないため、deleteを使用する代わりに、spliceを使用してアイテムのインデックスを渡す必要があります。

この機能を使用：

generateFilter = (e) => { 

     let temp = this.state.arr.slice(), 
      index = temp.indexOf(e.target.name); 

     if(index != -1){ 
     temp.splice(index, 1); 
     }else{ 
     temp.push(e.target.name); 
     } 

     this.setState({arr:temp}) 
     console.log(temp) 
    } 

チェック作業コード：http://jsbin.com/tatakamobu/1/edit?js,console,output

実行このスニペット：

class HelloWorldComponent extends React.Component { 
 
    
 
    constructor(props){ 
 
    super(props); 
 
    
 
    this.state = { 
 
     arr: [] 
 
    } 
 
    }  
 

 
    generateFilter = (e) => { 
 

 
     let temp = this.state.arr.slice(), 
 
      index = temp.indexOf(e.target.name); 
 

 
     if(index != -1){ 
 
     temp.splice(index, 1); 
 
     }else{ 
 
     temp.push(e.target.name); 
 
     } 
 

 
     this.setState({arr:temp}) 
 
     console.log(temp) 
 
    } 
 
    
 
    render() { 
 
    return (  
 
     <div> 
 
     <input onChange={this.generateFilter} type="checkbox" name="apple"/> 
 
     <input onChange={this.generateFilter} type="checkbox" name="samsung"/> 
 
     </div>  
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <HelloWorldComponent />, 
 
    document.getElementById('react_example') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='react_example'/>