映射复选框内的复选框 ReactJS

Posted 2023-03-05

【中文标题】映射复选框内的复选框 ReactJS

【英文标题】：Mapping checkboxes inside checkboxes ReactJS

【发布时间】：2019-08-03 12:42:09

【问题描述】：

我有一个功能，一旦选中主复选框，就会触发子复选框，所有这些复选框都是从 JSON 映射的。主复选框（***别）及其下的所有子复选框（第 2 级）在单击时显示并且效果很好，我要显示的是主复选框（第 3 级）的子复选框的子级单击二级物品。

基本上在检查时显示所有三个订单，并将第三个订单添加到我当前的代码中，因此 Options Group 显示 Options，并在 Options就是我要展示的，分别是Option 1、Option 2、option 3等等。 p>

复选框值作为道具从 Checkbox.js 传递到 Itemlist.js 发生提取/映射的位置。

（P.S.我对每个部分都有选择限制，以防有人对选择过程感到困惑，这与这个问题无关，可以忽略）

主要片段：https://codesandbox.io/embed/6jykwp3x6n?fontsize=14

第三级目标框仅供演示：https://codesandbox.io/embed/o932z4yr6y?fontsize=14，

Checkbox.js

import React from "react";
import "./Checkbox.css";

class Checkboxes extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      currentData: 0,
      limit: 2,
      checked: false
    ;
  

  selectData(id, event) 
    let isSelected = event.currentTarget.checked;
    if (isSelected) 
      if (this.state.currentData < this.props.max) 
        this.setState( currentData: this.state.currentData + 1 );
       else 
        event.preventDefault();
        event.currentTarget.checked = false;
      
     else 
      if (this.state.currentData >= this.props.min) 
        this.setState( currentData: this.state.currentData - 1 );
       else 
        event.preventDefault();
        event.currentTarget.checked = true;
      
    
  

  render() 
    const input2Checkboxes =
      this.props.options &&
      this.props.options.map(item => 
        return (
          <div className="inputGroup2">
            " "
            <div className="inputGroup">
              <input
                id=this.props.childk + (item.name || item.description)
                name="checkbox"
                type="checkbox"
                onChange=this.selectData.bind(
                  this,
                  this.props.childk + (item.name || item.description)
                )
              />
              <label
                htmlFor=this.props.childk + (item.name || item.description)
              >
                item.name || item.description" "

              </label>
            </div>
          </div>
        );
      );

    return (
      <form className="form">
        <div>
          /** <h2>this.props.title</h2>*/
          <div className="inputGroup">
            <input
              id=this.props.childk + this.props.name
              name="checkbox"
              type="checkbox"
              checked=this.state.checked
              onChange=this.selectData.bind(
                this,
                this.props.childk + this.props.uniq
              )
              onChange=() => 
                this.setState(
                  checked: !this.state.checked,
                  currentData: 0
                );
              
            />
            <label htmlFor=this.props.childk + this.props.name>
              this.props.name" "
            </label>
          </div>" "
          this.state.checked ? input2Checkboxes : undefined
        </div>
      </form>
    );
  


export default Checkboxes;

Itemlist.js映射函数发生的地方

...

      const selectedItem =
        selectedChild.children && selectedChild.children.length
          ? selectedChild.children[this.state.itemSelected]
          : null;

...

  <div>
                selectedItem &&
                  selectedItem.children &&
                  selectedItem.children.map((item, index) => (
                    <Checkboxes
                      key=index
                      name=item.name || item.description
                      myKey=index
                      options=item.children
                      childk=item.id
                      max=item.max
                      min=item.min
                    />
                  ))
              </div>
...

【问题讨论】：

试试npmjs.com/package/react-checkbox-tree

【参考方案1】：

这个问题是一个递归问题。显示选项组时，将显示组复选框及其选项。显示选项时，必须考虑它们的类型。

如果选项是ingredient，则可以显示一个简单的复选框。 如果是group，则必须显示一个新的选项组及其选项，如上所述。

这是您的代码中缺少的内容。这是working sandbox，您可以通过以下方式修复它：

在 Checkbox.js 中：

const input2Checkboxes =
  this.props.options &&
  this.props.options.map((item, index) => 
    // Is the option a 'group' or an 'ingredient'?
    return item.type === "group" ? (
      /* It's a group so display its options recursively */
      <Checkboxes
        key=index
        name=item.name || item.description
        options=item.children
        childk=this.props.childk
        max=item.max
        min=item.min
      />
    ) : (
      /* It's an ingredient so display a simple checkbox */
      <div className="inputGroup2" key=item.name || item.description>
        " "
        <div className="inputGroup">
          <input
            id=this.props.childk + (item.name || item.description)
            name="checkbox"
            type="checkbox"
            onChange=this.selectData.bind(
              this,
              this.props.childk + (item.name || item.description)
            )
          />
          <label
            htmlFor=this.props.childk + (item.name || item.description)
          >
            item.name || item.description" "
          </label>
        </div>
      </div>
    );
  );