如何只显示一些来自多个列表复选框项目？

Question

我目前面临的一个问题，而我的工作reactJs。我有我在哪里从状态阵列显示复选框项的reactstrap模态（https://reactstrap.github.io/components/modals/）。我想只显示一些选项，如选项1，选项4和选项6但不是全部，我怎么能隐藏在视图中的其他选项。这里是我的代码，任何人都可以帮助我，我怎么能解决这个问题吗？并有实现这个复选框检查，并在单个取消或检查/取消all.Please给我推荐一个很好的方式像使用与普通的js jQuery的或者干啥的好办法。

帮助表示赞赏。谢谢 ！

CodeSandBox代码：https://codesandbox.io/s/xj9ppwrq1z

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import 'bootstrap/dist/css/bootstrap.min.css';

import { Modal,ModalBody,ModalFooter,ModalHeader,Button,Input,Label } from 
"reactstrap";

class CheckBox extends Component{
  constructor(props){
    super(props);
    this.state = {
        checkboxModal: false,
        checkBoxlists: [
            {id:1, name: 'Option 1', isChecked: false},
            {id:2, name: 'Option 2', isChecked: false},
            {id:3, name: 'Option 3', isChecked: false},
            {id:4, name: 'Option 4', isChecked: false},
            {id:5, name: 'Option 5', isChecked: false},
            {id:6, name: 'Option 6', isChecked: false}
        ],
    };
}

toggleCheckBoxModal = () => {
    this.setState({ checkboxModal : !this.state.checkboxModal });
}
// Handles check or uncheck only to a single flag
handleSingleChange = (e) => {
    let  checkBoxlists =  this.state.checkBoxlists;
    checkBoxlists.forEach( (item) => {
        if(item.name === e.target.name ){
            item.isChecked = e.target.checked;
        }
    });
    this.setState({ checkBoxlists : checkBoxlists });
}

//Handle check/uncheck of all flag
handleAllChange = (e) => {
    let  checkBoxlists =  this.state.checkBoxlists;
    checkBoxlists.forEach( (item) => {
        item.isChecked = e.target.checked;
    });
    this.setState({ checkBoxlists: checkBoxlists });
}

handleInput = (e) => {
    this.setState({ [e.target.name] : e.target.value });
}

render(){
    return(
        <div>
            <Button onClick={this.toggleCheckBoxModal}>Click to Open</Button>
            <Modal isOpen={this.state.checkboxModal}>
            <ModalHeader toggle={this.checkboxModal}></ModalHeader>
            <ModalBody style={{ backgroundColor: "#4e5d6c", color: "#e1ebeb" }}>
            <div style={{ margin: "5px 0px 25px 25px"}}><Input type="checkbox" onClick={ this.handleAllChange } value="checkedAll" /> Check/Uncheck All</div>
            {this.state.checkBoxlists.map( item => {
                return(
                    <ul key={item.id}>
                        <li >
                            <Input
                                // key={item.id}
                                type={"checkbox"}
                                name={item.name}
                                value={item.name}
                                checked={item.isChecked}
                                onChange={this.handleSingleChange} 
                            />
                            <Label>{item.name}</Label>
                        </li>
                    </ul>
                )
            })}                                            
            </ModalBody>
            <ModalFooter>
            <Button onClick={this.toggleCheckBoxModal}>Close</Button>
            </ModalFooter>
            </Modal>
        </div>
    );
  }
}
ReactDOM.render(<CheckBox />, document.getElementById('root'));

Answer 1

该renderCheckboxes()的方法将返回要复选框。我创建实例阵列为该。然后在renderCheckboxes()使用render() 您可以彻底删除handleSinlgeChange()使用，在handleAllChange().Like以下

import React, { Component } from "react";

import ReactDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import {
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
  Button,
  Input,
  Label
} from "reactstrap";

class CheckBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allChecked:false,
      checkboxModal: false,
      checkBoxlists: [
        { id: 1, name: "Option 1", isChecked: false },
        { id: 2, name: "Option 2", isChecked: false },
        { id: 3, name: "Option 3", isChecked: false },
        { id: 4, name: "Option 4", isChecked: false },
        { id: 5, name: "Option 5", isChecked: false },
        { id: 6, name: "Option 6", isChecked: false }
      ]
    };
  }

  toggleCheckBoxModal = () => {
    this.setState({ checkboxModal: !this.state.checkboxModal });
  };
  // Handles check or uncheck only to a single flag
  //Handle check/uncheck of all flag
  handleAllChange = e => {
    let checkBoxlists = this.state.checkBoxlists;
    let allChecked = this.state.allChecked;
    if (e.target.value === "checkedAll") {
      checkBoxlists.forEach(item => {
        item.isChecked = e.target.checked;
        allChecked = e.target.checked
      });
    }
    else checkBoxlists.find(item => item.name == e.target.name).isChecked = e.target.checked
    this.setState({ checkBoxlists,allChecked });
  }

  handleInput = e => {
    this.setState({ [e.target.name]: e.target.value });
  };
  renderCheckboxes = () => {
    let wantedCheckboxes = [1, 4, 6];
    return this.state.checkBoxlists.filter(cb => wantedCheckboxes.includes(cb.id))
      .map(item => (
        <ul key={item.id}>
          <li>
            <Input
              // key={item.id}
              type={"checkbox"}
              name={item.name}
              value={item.name}
              checked={item.isChecked}
              onChange={this.handleAllChange}
            />
            <Label>{item.name}</Label>
          </li>
        </ul>
      ))
  }
  render() {
    return (
      <div>
        <Button onClick={this.toggleCheckBoxModal} style={{ margin: "50px" }}>
          Click to Open
        </Button>
        <Modal isOpen={this.state.checkboxModal}>
          <ModalHeader toggle={this.checkboxModal} />
          <ModalBody style={{ backgroundColor: "#4e5d6c", color: "#e1ebeb" }}>
            <div style={{ margin: "5px 0px 25px 25px" }}>
              <Input
                type="checkbox"
                onClick={this.handleAllChange}
                value="checkedAll"
                checked={this.state.allChecked}
              />{" "}
              Check/Uncheck All
            </div>
            {this.renderCheckboxes()}
          </ModalBody>
          <ModalFooter>
            <Button onClick={this.toggleCheckBoxModal}>Close</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<CheckBox />, document.getElementById("root"));

希望这将有助于

Answer 2

我想创建一个返回包含checkBoxLists数组只有你希望一次显示的项功能

filterOptions = () => {
    checkBoxlists.forEach( (item) => {
       if(item.id % 2 == 0) // example: only even options 
                            // for 1, 4 6 
       if(item.id == 1)
            newOptions.add(item)
       elseif(item.id==4) 
            newOptions.add(item)
       elseif(itemid==6) 
            newOptions.add(item)
};
return newOptions;
}

这是建议从一个新手，但我只是想帮