生成基於複選框值的唯一數組

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是array不是Object，所以不是使用delete，而是需要使用splice並傳遞item的索引。

使用此功能：

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