单击按钮添加输入组，然后在react

Question

我需要在React中创建一个非常复杂的表单。它包括添加一组文本输入，然后在该组中有更多的文本输入。需要能够独立于彼此和其他组添加/删除外部组内部的文本输入。

我尝试使用几种方法，主要是.map和.concat，但是正在发生的是外部组的INSIDE输入组并没有彼此独立地删除。如果删除外部输入组内的字段之一，则该组将删除所有位置。我提供了一些屏幕截图以显示我的意思。

在屏幕快照中，我显示了单击“删除属性”时会从所有属性组中删除输入组。我正在努力做到这一点，以便可以删除这些子属性而不会互相影响。

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;