Javascript 删除动态元素

--FieldSection.js--

import React，{Component}来自'React'；
从“./Field.js”导入字段；
类字段节扩展组件{
建造师（道具）{
超级（道具）；
这个州={
字段数：1
}
}
addField=（）=>{
const{numberofields}=this.state；
this.setState（{numberofields:numberofields+1}）；
}  
listFields=（numberOfFields）=>{
var字段=[]；
对于（var i=0；i{
this.setState（{value:event.target.value}）；
如果（event.target.value==“string”）
{
this.setState（{specVisible:'visible'}）；
this.setState（{display:'block'}）；
}
否则{
this.setState（{specVisible:'hidden'}）
this.setState（{display:'none'}）
}
}
渲染（）{
const{SelectChange}=this；
const{value，specVisible，display}=this.state；
返回(
新字段
--除去


姓名：


说明：


数据类型：
一串
性格
时间戳
整数
长的
双重的
布尔值


指定长度：


)}
}
导出默认字段

我正在尝试实现一个功能，单击“删除字段”按钮，所有新字段旁边会出现一个复选框列表。无论何时确认删除，它都会删除所有选中的元素

显然，我可以在numberOfFields状态中减去1，但是我想删除特定的元素，而不仅仅是最后一个字段

那会是什么样子

---

您可以按如下方式操作。基本思想是获取需要删除的字段的所有ID，并对其进行迭代，删除与这些ID对应的所有组件

• 当调用

  addField

  时，字段的状态选择 组件通过添加具有唯一id的键进行更新，该键带有字段 组件作为其值以及所有道具

• remove

  状态跟踪是否已单击并删除字段 通过传递每个字段组件中的“删除”复选框来切换该复选框 作为道具

• fieldsToRemove

  状态通过中的

  markFields

  prop更新 每次单击“删除字段”复选框时的字段组件

• 调用

  deleteFields

  时，它会迭代

  fieldsToRemove

  说明并从

  字段中删除相应的组件
  状态对象
  

• 我使用

  uuid

  包为每个

  字段

  指定唯一ID，而不是删除 通过索引，这不是一个很好的方式，也与 反应

FieldSection.js

import React, { Component } from "react";
import Field from "./Field.js";
import { v4 } from "uuid";

class FieldSection extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fields: {},
      remove: false,
      fieldsToRemove: []
    };
  }
  addField = () => {
    const fields = this.state.fields;
    const id = v4();
    fields[id] = <Field key={id} id={id} mark={this.markFields} />;
    this.setState({ fields });
  };
  listFields = () => {
    var ids = Object.keys(this.state.fields);
    return ids.map(id => {
      return React.cloneElement(this.state.fields[id], {
        remove: this.state.remove
      });
    });
  };
  markFields = (checked, i) => {
    if (checked) {
      const arr = [...this.state.fieldsToRemove];
      arr.push(i);
      this.setState({ fieldsToRemove: arr });
    } else {
      const arr = this.state.fieldsToRemove.filter(x => i !== x);
      this.setState({ fieldsToRemove: arr });
    }
  };
  removeFields = () => {
    this.setState({ remove: !this.state.remove });
  };

  deleteFields = () => {
    const fields = { ...this.state.fields };

    this.state.fieldsToRemove.forEach(id => {
      delete fields[id];
    });

    this.setState({ fields, fieldsToRemove: [], remove: false });
  };

  render() {
    const { listFields, addField, removeFields, deleteFields } = this;
    const { numberOfFields, remove } = this.state;
    return (
      <div>
        <label>
          <u>Fields</u>
        </label>
        {listFields()}
        <div id="fieldButtons">
          <button id="addField" type="button" onClick={addField}>
            {" "}
            Add Field{" "}
          </button>
          <button id="removeField" type="button" onClick={removeFields}>
            {" "}
            Remove Field{" "}
          </button>
          <br />
          <button type="button" onClick={deleteFields}>
            {" "}
            Delete Fields{" "}
          </button>
        </div>
      </div>
    );
  }
}

export default FieldSection;

import React from "react";

class Field extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "empty",
      specVisible: "hidden",
      display: "none"
    };
  }
  SelectChange = event => {
    this.setState({ value: event.target.value });
    if (event.target.value === "string") {
      this.setState({ specVisible: "visible" });
      this.setState({ display: "block" });
    } else {
      this.setState({ specVisible: "hidden" });
      this.setState({ display: "none" });
    }
  };
  render() {
    const { SelectChange } = this;
    const { value, specVisible, display } = this.state;
    const styles = this.props.remove
      ? { display: "inline", visibility: "visible" }
      : { display: "inline", visibility: "hidden" };
    return (
      <div>
        <div>
          <label>
            <strong>New Field </strong>
          </label>
          <div id="remove-" className="remove" style={styles}>
            <label> --Remove </label>{" "}
            <input
              type="checkbox"
              id="removeBox"
              className="rmvCheckbox"
              onChange={e => {
                this.props.mark(e.target.checked, this.props.id);
              }}
            />
            <br />
          </div>
          <label> Name: </label>
          <input id="name-" className="name" type="text" name="name" /> <br />
          <label> Description: </label>
          <input
            id="description-"
            className="description"
            name="description"
          />{" "}
          <br />
          <label> Datatype: </label>
          <select
            value={value}
            onChange={SelectChange}
            id={`selectData-${this.props.number}`}
            className="selectData"
            name="selectData" /*onClick={AddListener}*/
          >
            <option value="empty"> </option>
            <option value="string"> String </option>
            <option value="character"> Character </option>
            <option value="timestamp"> Timestamp </option>
            <option value="integer"> Integer </option>
            <option value="long"> Long </option>
            <option value="double"> Double </option>
            <option value="boolean"> Boolean </option>
          </select>{" "}
          <br />
        </div>
        <div
          id={`specifySection-${this.props.number}`}
          className="specifySection"
          style={{ visibility: specVisible, display: display }}
        >
          <label> Specify Length: </label>
          <input className="specifyLength" type="text" name="length" /> <br />
        </div>
      </div>
    );
  }
}

export default Field;

import React，{Component}来自“React”；
从“/Field.js”导入字段；
从“uuid”导入{v4}；
类字段节扩展组件{
建造师（道具）{
超级（道具）；
此.state={
字段：{}，
删除：false，
fieldsToRemove:[]
};
}
addField=（）=>{
常量字段=this.state.fields；
常数id=v4（）；
字段[id]=；
this.setState（{fields}）；
};
列表字段=（）=>{
var id=Object.keys（this.state.fields）；
返回id.map（id=>{
返回React.cloneElement（this.state.fields[id]{
删除：this.state.remove
});
});
};
标记字段=（选中，i）=>{
如果（选中）{
const arr=[…this.state.fieldsToRemove]；
arr.push（i）；
this.setState（{fieldsToRemove:arr}）；
}否则{
const arr=this.state.fieldsToRemove.filter（x=>i！==x）；
this.setState（{fieldsToRemove:arr}）；
}
};
removeFields=（）=>{
this.setState（{remove:！this.state.remove}）；
};
deleteFields=（）=>{
常量字段={…this.state.fields}；
this.state.fieldsToRemove.forEach（id=>{
删除字段[id]；
});
this.setState（{fields，fieldsToRemove:[]，remove:false}）；
};
render（）{
const{listFields，addField，removeFields，deleteFields}=this；
const{numberofields，remove}=this.state；
返回(
领域
{listFields（）}
{" "}
添加字段{“”}
{" "}
删除字段{“”}


{" "}
删除字段{“”}
);
}
}
导出默认字段部分；

Field.js

import React, { Component } from "react";
import Field from "./Field.js";
import { v4 } from "uuid";

class FieldSection extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fields: {},
      remove: false,
      fieldsToRemove: []
    };
  }
  addField = () => {
    const fields = this.state.fields;
    const id = v4();
    fields[id] = <Field key={id} id={id} mark={this.markFields} />;
    this.setState({ fields });
  };
  listFields = () => {
    var ids = Object.keys(this.state.fields);
    return ids.map(id => {
      return React.cloneElement(this.state.fields[id], {
        remove: this.state.remove
      });
    });
  };
  markFields = (checked, i) => {
    if (checked) {
      const arr = [...this.state.fieldsToRemove];
      arr.push(i);
      this.setState({ fieldsToRemove: arr });
    } else {
      const arr = this.state.fieldsToRemove.filter(x => i !== x);
      this.setState({ fieldsToRemove: arr });
    }
  };
  removeFields = () => {
    this.setState({ remove: !this.state.remove });
  };

  deleteFields = () => {
    const fields = { ...this.state.fields };

    this.state.fieldsToRemove.forEach(id => {
      delete fields[id];
    });

    this.setState({ fields, fieldsToRemove: [], remove: false });
  };

  render() {
    const { listFields, addField, removeFields, deleteFields } = this;
    const { numberOfFields, remove } = this.state;
    return (
      <div>
        <label>
          <u>Fields</u>
        </label>
        {listFields()}
        <div id="fieldButtons">
          <button id="addField" type="button" onClick={addField}>
            {" "}
            Add Field{" "}
          </button>
          <button id="removeField" type="button" onClick={removeFields}>
            {" "}
            Remove Field{" "}
          </button>
          <br />
          <button type="button" onClick={deleteFields}>
            {" "}
            Delete Fields{" "}
          </button>
        </div>
      </div>
    );
  }
}

export default FieldSection;

import React from "react";

class Field extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "empty",
      specVisible: "hidden",
      display: "none"
    };
  }
  SelectChange = event => {
    this.setState({ value: event.target.value });
    if (event.target.value === "string") {
      this.setState({ specVisible: "visible" });
      this.setState({ display: "block" });
    } else {
      this.setState({ specVisible: "hidden" });
      this.setState({ display: "none" });
    }
  };
  render() {
    const { SelectChange } = this;
    const { value, specVisible, display } = this.state;
    const styles = this.props.remove
      ? { display: "inline", visibility: "visible" }
      : { display: "inline", visibility: "hidden" };
    return (
      <div>
        <div>
          <label>
            <strong>New Field </strong>
          </label>
          <div id="remove-" className="remove" style={styles}>
            <label> --Remove </label>{" "}
            <input
              type="checkbox"
              id="removeBox"
              className="rmvCheckbox"
              onChange={e => {
                this.props.mark(e.target.checked, this.props.id);
              }}
            />
            <br />
          </div>
          <label> Name: </label>
          <input id="name-" className="name" type="text" name="name" /> <br />
          <label> Description: </label>
          <input
            id="description-"
            className="description"
            name="description"
          />{" "}
          <br />
          <label> Datatype: </label>
          <select
            value={value}
            onChange={SelectChange}
            id={`selectData-${this.props.number}`}
            className="selectData"
            name="selectData" /*onClick={AddListener}*/
          >
            <option value="empty"> </option>
            <option value="string"> String </option>
            <option value="character"> Character </option>
            <option value="timestamp"> Timestamp </option>
            <option value="integer"> Integer </option>
            <option value="long"> Long </option>
            <option value="double"> Double </option>
            <option value="boolean"> Boolean </option>
          </select>{" "}
          <br />
        </div>
        <div
          id={`specifySection-${this.props.number}`}
          className="specifySection"
          style={{ visibility: specVisible, display: display }}
        >
          <label> Specify Length: </label>
          <input className="specifyLength" type="text" name="length" /> <br />
        </div>
      </div>
    );
  }
}

export default Field;

从“React”导入React；
类字段扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“空”，
可见：“隐藏”，
显示：“无”
};
}
选择更改=事件=>{
this.setState（{value:event.target.value}）；
如果（event.target.value==“string”）{
this.setState（{specVisible:“visible”}）；
this.setState（{display:“block”}）；
}否则{
this.setState（{specVisible:“hidden”}）；
this.setState（{display:“none”}）；
}
};
render（）{
const{SelectChange}=this；
const{value，specVisible，display}=this.state；
const styles=this.props.remove
？{显示：“内联”，可见性：“可见”}
：{显示：“内联”，可见性：“隐藏”}；
返回(
新字段
--删除{“”}
{
this.props.mark（e.target.checked，this.props.id）；
}}
/>


姓名：


说明：
{" "}