Question

我目前在处理reactJs时遇到问题。我有一个reactstrap模态（https://reactstrap.github.io/components/modals/），其中从状态数组中显示复选框项。我只想显示某些选项，例如 选项1，选项4和选项6 ，但不是全部，我如何在视图中隐藏其他选项。这是我的代码，有人可以帮助我如何解决此问题？并有一种实现此复选框的好方法，以将其选中或取消选中或全部选中/取消选中。请向我推荐一个好方法，例如使用jquery或与纯Js相关的任何东西。

我们非常感谢您的帮助。谢谢！

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()。就像下面的

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

这是新手的建议，但我只是想提供帮助

如何仅显示许多列表中的某些复选框项目？

2 个答案: