Блог

У меня есть функция, которая запускает дочерние флажки, как только установлен основной флажок, и все эти флажки отображаются из JSON. Основные флажки (самого высокого уровня) и все его дочерние флажки (2-го уровня) под ними отображаются при нажатии, и они отлично работают, то, что я пытаюсь отобразить, — это дочерние элементы этих дочерних элементов основных флажков (3-го уровня) при нажатии на элементы 2-го уровня.

В основном для того, чтобы показать все три порядка друг под другом при проверке и добавить 3-й порядок в мой текущий код, поэтому в группе параметров отображаются параметры, а в разделе Параметры находится то, что я хочу показать, а именно: вариант 1, вариант 2, вариант 3 и так далее..

Значения флажков передаются как реквизиты из Checkbox.js в Itemlist.js где происходит выборка / сопоставление.

(P.S. У меня есть ограничение выбора для каждого раздела на случай, если кто-то запутался в процессе выбора, который не имеет отношения к этому вопросу и может быть проигнорирован)

Основной фрагмент :https://codesandbox.io/embed/6jykwp3x6n?fontsize=14

3-й уровень предназначался для флажков только для демонстрации:https://codesandbox.io/embed/o932z4yr6y ?размер шрифта = 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 amp;amp;
      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 amp;amp; selectedChild.children.length
          ? selectedChild.children[this.state.itemSelected]
          : null;

...

  <div>
                {selectedItem amp;amp;
                  selectedItem.children amp;amp;
                  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>
...
  

Проблема является рекурсивной. Когда отображается группа параметров, отображается флажок группы и ее параметры. При отображении параметров необходимо учитывать их тип.

1. Если опция является ingredient , может отображаться простой флажок.
2. Если это group , должна отображаться новая группа параметров со своими параметрами, как описано выше.

Это то, чего не хватает в вашем коде. Вот рабочая песочница, и вот как вы можете это исправить:

в Checkbox.js:

 const input2Checkboxes =
  this.props.options amp;amp;
  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>
    );
  });