Как самостоятельно удалить динамически добавленные поля ввода в ReactJS

Question

Я пытаюсь самостоятельно удалить динамические входы в форме в React.У меня есть группа атрибутов пользователя, а затем дочерний атрибут пользователя.Мне нужно иметь возможность динамически добавлять новые группы пользовательских атрибутов и дочерние элементы, но затем удалять эти поля, не удаляя ВСЕ дочерние атрибуты.

Прямо сейчас, когда я удаляю дочерний атрибут, он удаляет его из КАЖДОЙ группы пользовательских атрибутов.

У меня есть рабочая скрипка, которая показывает мой код: https://codesandbox.io/embed/23kr654w80

    import React, { Component } from "react";
import { Button, Input, Row, Col, Form, FormGroup, Label } from "reactstrap";

class OfferCriteria extends Component {
  constructor(props) {
    super(props);
    this.state = {
      single: "",
      attributeSingle: [{ single: "" }],
      child: "",
      attributeChild: [{ child: " " }]
    };
  }
  handleNameChange = event => {
    this.setState({
      name: event.target.value
    });
  };

  handleAddSingleAttribute = () => {
    this.setState({
      attributeSingle: this.state.attributeSingle.concat([{ name: "" }])
    });
  };

  handleRemoveSingleAttribute = idx => () => {
    this.setState({
      attributeSingle: this.state.attributeSingle.filter(
        (s, sidx) => idx !== sidx
      )
    });
  };

  handleAddChildAttribute = () => {
    this.setState({
      attributeChild: this.state.attributeChild.concat([{ child: "" }])
    });
  };

  handleRemoveChildAttribute = idz => () => {
    this.setState({
      attributeChild: this.state.attributeChild.filter(sidz => idz !== sidz)
    });
  };

  render() {
    return (
      <div>
        <Row>
          <Col lg="10">
            <hr />
          </Col>
          <Col lg="2" className="float-right">
            <Button color="success" onClick={this.handleAddSingleAttribute}>
              Add Attribute Group
            </Button>
          </Col>
        </Row>
        {this.state.attributeSingle.map(() => (
          <div>
            <br />
            <Row>
              <Col lg="2">
                <Label>User Attributes</Label>
              </Col>
              <Col lg="3" className="float-left">
                <FormGroup check inline>
                  <Input
                    className="form-check-input"
                    type="radio"
                    id="includeUserAttributes"
                    name="inline-radios"
                    value="includeUserAttributes"
                  />
                  <Label
                    className="form-check-label"
                    check
                    htmlFor="inline-radio1"
                  >
                    Include
                  </Label>
                </FormGroup>
                <FormGroup check inline>
                  <Input
                    className="form-check-input"
                    type="radio"
                    id="excludeUserAttributes"
                    name="inline-radios"
                    value="excludeUserAttributes"
                  />
                  <Label
                    className="form-check-label"
                    check
                    htmlFor="inline-radio2"
                  >
                    Exclude
                  </Label>
                </FormGroup>
              </Col>
              <Col lg="4">
                <Input
                  type="text"
                  name="text-input"
                  placeholder="This is parent attribute"
                />
              </Col>
            </Row>
            <br />
            <Row>
              <Col lg="3">
                {this.state.attributeChild.map(() => (
                  <div className="shareholder">
                    <Input
                      type="text"
                      name="text-input"
                      placeholder="This is child attribute"
                    />
                  </div>
                ))}
              </Col>

              <Col lg="3" className="float-right">
                {this.state.attributeChild.map(() => (
                  <div className="shareholder">
                    <Button
                      color="primary"
                      onClick={this.handleAddChildAttribute}
                    >
                      Add Attribute Child
                    </Button>
                    <br />
                  </div>
                ))}
              </Col>
              <Col lg="3" className="float-right">
                {this.state.attributeChild.map(idz => (
                  <div className="shareholder">
                    <Button
                      color="danger"
                      onClick={this.handleRemoveChildAttribute(idz)}
                    >
                      Remove Attribute Child
                    </Button>
                    <br />
                  </div>
                ))}
              </Col>
            </Row>
            <hr />
          </div>
        ))}
      </div>
    );
  }
}
export default OfferCriteria;

Мне нужно, чтобы эти дочерние атрибуты удалялись ТОЛЬКО в их родительской группе атрибутов, вместо того, чтобы удалять их все из всех групп атрибутов.

Answer 1

В вашем коде есть пара ошибок, но я сосредоточусь на вашем первоначальном вопросе.

Проблема в том, что вы используете один и тот же массив child для всех своих групп.Чтобы быть правильным, вы должны включить состояние attributeChild в объекты attributeSingle:

{
  attributeSingle: [
    { 
      single: "", 
      attributeChild: [
        { 
          child: " " 
        }
      ]
    }
  ]
}

Таким образом, дети остаются независимыми между группами.