Реагировать - при нажатии кнопки отображается другая форма, но рендеринг формы позади других компонентов

Question

На данный момент, когда пользователь нажимает кнопку ДОБАВИТЬ, мой код создает подкатегорию (новую форму). Они могут нажимать кнопку «Добавить» столько раз, сколько захотят, и это добавляет новую форму в пользовательский интерфейс. Мои проблемы в том, что эти новые формы отрисовываются за другими категориями (как показано на рисунке, вот как это выглядит после того, как я нажимаю кнопку «ДОБАВИТЬ» для «Дисконтные универмаги»).

Пользовательский интерфейс после кнопки ДОБАВИТЬ нажал

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

Вот код для родительской категории AKA, код, содержащий кнопку ADD.

const dataForms = categoriesSelected ? (
    [...categoriesMap.keys()].map((d,idx) => {
      return (
        <div key={d}>
          {d === 0 && (
            <h2 className="text-center mb-3" id="header">
              Input Data For Selected Categories
            </h2>
          )}
          <div key={d} className="input-data-select-container mb-4 children">
            <Row>
              <Col xs="10">
                <h3 className="font-weight-light">{d}</h3>
              </Col>
              <Col xs="2">
                  <Button className="addition-child"
                  onClick={(e) => addition(d)}
                >
                  Add
                </Button>

              </Col>
              </Row>
            <Row>
              <Col xs="4">
                <Label>Recommended Size:</Label>
                <Input
                  type="number"
                  min="0"
                  placeholder="0"
                  name="recommendedSize"
                  onChange={(e) => handleInputChange(e, d)}
                />
              </Col>
              <Col xs="4">
                <Label>
                  First-Year {new Date().getFullYear()} Sales Per Sq Ft:
                </Label>
                <Input
                  type="number"
                  min="0"
                  placeholder="0"
                  name="firstYearSalesPerSqFt"
                  onChange={(e) => handleInputChange(e, d)}
                />
              </Col>
              <Col xs="4">
                <Label>
                  Fifth-Year {new Date().getFullYear() + 5} Sales Per Sq Ft:
                </Label>
                <Input
                  type="number"
                  min="0"
                  placeholder="0"
                  name="fifthYearSalesPerSqFt"
                  onChange={(e) => handleInputChange(e, d)}
                />
              </Col>
            </Row>
            <FormGroup className="mt-2">
              <Label>Select Recommended Vendors:</Label>
              <Select
                closeMenuOnSelect={true}
                options={orderedSuggestedRetailers[idx]}
                isMulti
                // options={apparelAndAccessories}
                placeholder="Select all the recommended vendors for the report. "
                maxMenuHeight="270px"
                onChange={(e) => addRetailer(e, d)}
              />
            </FormGroup>
            <div className="children">
            {children(d, idx)}
            </div>
          </div>
        </div>
      );
    })) : (
    <h2 className="text-center">No Categories Selected</h2>
  );

Обратите внимание, что в этом коде я показываю детей с этой строкой в ​​этом коде:

{children(d, idx)}

Это код, который делает дочерние подкатегории:

function children(d, idx) {
    let output = [];
    for(let i = 0; i <= categoriesMap.get(d).amount-2; i++) {
      const temp = (
        <div key={i} className="input-data-select-container">
          <Label>{d}</Label>
          <Row>
              <Col xs="4">
                <Label>Recommended Size:</Label>
                <Input
                  type="number"
                  min="0"
                  placeholder="0"
                  name="recommendedSize"
                  onChange={(e) => handleInputChangeOfChild(e, d, i+1)}
                />
              </Col>
              <Col xs="4">
                <Label>
                  First-Year {new Date().getFullYear()} Sales Per Sq Ft:
                </Label>
                <Input
                  type="number"
                  min="0"
                  placeholder="0"
                  name="firstYearSalesPerSqFt"
                  onChange={(e) => handleInputChangeOfChild(e, d, i+1)}
                />
              </Col>
              <Col xs="4">
                <Label>
                  Fifth-Year {new Date().getFullYear() + 5} Sales Per Sq Ft:
                </Label>
                <Input
                  type="number"
                  min="0"
                  placeholder="0"
                  name="fifthYearSalesPerSqFt"
                  onChange={(e) => handleInputChangeOfChild(e, d, i+1)}
                />
              </Col>
            </Row>
            <FormGroup className="mt-2">
              <Label>Select Recommended Vendors:</Label>
              <Select
                closeMenuOnSelect={false}
                options={orderedSuggestedRetailers[idx]}
               // options={apparelAndAccessories}
                isMulti
                placeholder="Select all the recommended vendors for the report. "
                maxMenuHeight="270px"
                onChange={(e) => addRetailerOfChild(e, d, i+1)}
              />
            </FormGroup>
        </div>
      );
      output[i] = (temp);
    }
    return output;
    }

Answer 1

Было бы полезно увидеть CSS вашего кода. Мне кажется, что некоторый родительский div имеет фиксированную высоту , поэтому его дочерние элементы визуализируются вне его!

Если это так, вы можете исправить это с помощью min-height и max-height для установки высоты c в CSS.