生成基于复选框值的唯一数组

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