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来传递项目的索引。

使用此功能：

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

根据复选框值生成唯一数组

1 个答案: