Javascript 如何仅显示多个列表中的部分复选框项目？

我目前在处理reactJs时面临一个问题。我有一个reactstrap模式（），其中我显示了来自state的数组中的复选框项。我只想显示一些选项，如选项1、选项4和选项6，但不是全部，我如何在视图中隐藏其他选项。这是我的代码，谁能帮我解决这个问题？是否有一种很好的方法来实现这个复选框，在单个复选框中选中和取消选中，或者全部选中/取消选中。请向我推荐一种很好的方法，比如使用jquery或与普通Js相关的anythin

谢谢你的帮助。谢谢大家!

代码沙盒代码：

import React，{Component}来自'React'；
从“react dom”导入react dom；
导入'bootstrap/dist/css/bootstrap.min.css'；
从导入{Modal，ModalBody，ModalFooter，ModalHeader，按钮，输入，标签}
“反应带”；
类复选框扩展组件{
建造师（道具）{
超级（道具）；
此.state={
checkboxModal:false，
检查框列表：[
{id:1，名称：'Option 1'，isChecked:false}，
{id:2，名称：'Option 2'，isChecked:false}，
{id:3，名称：'Option 3'，isChecked:false}，
{id:4，名称：'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}）；
}
//仅对单个标志处理选中或取消选中
handleSingleChange=（e）=>{
让checkBoxlists=this.state.checkBoxlists；
检查框列表。forEach（（项目）=>{
if（item.name==e.target.name）{
item.isChecked=e.target.checked；
}
});
this.setState（{checkBoxlists:checkBoxlists}）；
}
//处理所有标志的选中/取消选中
handleAllChange=（e）=>{
让checkBoxlists=this.state.checkBoxlists；
检查框列表。forEach（（项目）=>{
item.isChecked=e.target.checked；
});
this.setState（{checkBoxlists:checkBoxlists}）；
}
handleInput=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
}
render（）{
返回(
点击打开
选中/取消选中全部
{this.state.checkBoxlists.map（项=>{
返回(


{item.name}


)
})}                                            
接近
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

rendercheckbox（）的方法将返回所需的复选框。我为此创建了示例数组。然后在

render（）中使用
rendercheckbox（）


您可以完全删除
handleSingleChange（）
在
handleAllChange（）
中使用它，如下所示

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"));

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“bootstrap/dist/css/bootstrap.min.css”；
进口{
情态动词
ModalBody，
莫达沃特，
莫达尔海德，
按钮
输入，
标签
}从“反应带”；
类复选框扩展组件{
建造师（道具）{
超级（道具）；
此.state={
全部选中：错误，
checkboxModal:false，
检查框列表：[
{id:1，名称：“选项1”，选中：false}，
{id:2，名称：“选项2”，选中：false}，
{id:3，名称：“选项3”，选中：false}，
{id:4，名称：“选项4”，选中：false}，
{id:5，name:“Option 5”，isChecked:false}，
{id:6，name:“Option 6”，isChecked:false}
]
};
}
toggleCheckBoxModal=（）=>{
this.setState（{checkboxModal:！this.state.checkboxModal}）；
};
//仅对单个标志处理选中或取消选中
//处理所有标志的选中/取消选中
handleAllChange=e=>{
让checkBoxlists=this.state.checkBoxlists；
let allChecked=this.state.allChecked；
如果（例如，target.value==“checkedAll”）{
检查框列表。forEach（项目=>{
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}）；
};
RenderCheckBox=（）=>{
设wantedcheckbox=[1,4,6]；
返回this.state.checkBoxlists.filter（cb=>wantedCheckboxes.includes（cb.id））
.map（项目=>(


{item.name}


))
}
render（）{
返回(
点击打开
{" "}
选中/取消选中全部
{this.rendercheckbox（）}
接近
);
}
}
render（，document.getElementById（“根”））；

希望它会有所帮助
我将创建一个函数，返回一组复选框列表，其中只包含您希望一次显示的项目

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;
}

这是一个新手的建议，但我只是想帮你
至少你试过了，这很好。很抱歉，它不符合我的答案和我需要的逻辑。@TheArer我已经编辑了代码，请告诉我它是否有效。顺便问一下，我们如何管理“全部选中/全部取消选中”的状态。。。。当您选中“全部选中/取消选中”并关闭并再次打开模式而不刷新页面时，它将自动取消选中。您知道如何保持其状态吗。@TheArer您想在关闭和再次打开modal时自动取消选中所有复选框吗？@TheArer I
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;
}