如何在 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: " " 
        }
      ]
    }
  ]
}

这样，孩子们在群体之间保持独立。