无法从主桶中删除已移动的项目

Question

我创建了这个表单组件来生成一个动态响应页面，选项是通过单选按钮选择的。在选择了选项之后，该选项应该下降到相关的桶中。

在当前的实例中，我能够选择所有指定的单选按钮，在这里，我希望能够在所有生成的按钮中，在两个位置上只选择一个单选按钮。

import React, { useState } from "react";
import { Row, Col, Divider, Button, Radio } from "antd";

import { Hicon, uuid } from "utils/imports";
import styles from "./FormsToBeMaintained.module.css";

const FormsToBeMaintained = props => {
  const plainOptions = [
    {
      label: "Regulatory Forms",
      value: "Regulatory Forms"
    },
    {
      label: "Employer Specific Forms",
      value: "Employer Specific Forms"
    }
  ];
  const NewFormsIdentified = [
    {
      id: 1,
      tittle: "W-4",
      "Regulatory Forms": true,
      "Employer Specific Forms": false,
      options: [
        {
          labelId: 3,
          label: "Regulatory Forms",
          value: "Regulatory Forms"
        },
        {
          labelId: 4,
          label: "Employer Specific Forms",
          value: "Employer Specific Forms"
        }
      ]
    },
    {
      id: 2,
      tittle: "State new hire tax forms",
      "Regulatory Forms": true,
      "Employer Specific Forms": false,
      options: [
        {
          labelId: 5,
          label: "Regulatory Forms",
          value: "Regulatory Forms"
        },
        {
          labelId: 6,
          label: "Employer Specific Forms",
          value: "Employer Specific Forms"
        }
      ]
    },
    {
      id: 3,
      tittle: "Offer letter",
      "Regulatory Forms": true,
      "Employer Specific Forms": false,
      options: [
        {
          labelId: 7,
          label: "Regulatory Forms",
          value: "Regulatory Forms"
        },
        {
          labelId: 8,
          label: "Employer Specific Forms",
          value: "Employer Specific Forms"
        }
      ]
    },
    {
      id: 4,
      tittle: "Employment agreement",
      "Regulatory Forms": true,
      "Employer Specific Forms": false,
      options: [
        {
          labelId: 9,
          label: "Regulatory Forms",
          value: "Regulatory Forms"
        },
        {
          labelId: 10,
          label: "Employer Specific Forms",
          value: "Employer Specific Forms"
        }
      ]
    },
    {
      id: 5,
      tittle: "Emergency contact information",
      "Regulatory Forms": true,
      "Employer Specific Forms": false,
      options: [
        {
          labelId: 11,
          label: "Regulatory Forms",
          value: "Regulatory Forms"
        },
        {
          labelId: 12,
          label: "Employer Specific Forms",
          value: "Employer Specific Forms"
        }
      ]
    }
  ];
  const [radioChecked, isRadioChecked] = useState(false);
  const [value1, setValue1] = useState([]);
  const [edit1, setEdit1] = useState(false);
  const [regulatoryData, setRegulatoryData] = useState([]);
  const [list, updatelist] = useState([]);

  const onChange1 = event => {
    // console.log("checked", event);
    setValue1([
      ...value1,
      { name: event.target.name.tittle, value: event.target.value }
    ]);
    isRadioChecked(true);
  };
  console.log(value1);

  const onSubmit = () => {
    setRegulatoryData([...value1]);
    console.log(regulatoryData);
    removeHandler(...value1);
    console.log(list);
  };

  // const removeFormFields = i => {
  //   const newFormValues = [...value1];
  //   newFormValues.splice(i, 1);
  //   delValue(newFormValues);
  //   console.log(newFormValues);
  // };
  const removeHandler = e => {
    const x1 = e.target.getAttribute(NewFormsIdentified);
    updatelist(list.filter(items => items.title !== x1));
    console.log(list);
  };

  return (
    <>
      <Row>
        <Col span={12} className={`${styles.outerBor} `}>
          <Row>
            <Col
              span={24}
              className={`text-size-18 ${styles.title} ${styles.section}`}
            >
              Regulated Forms
            </Col>
            <Divider />
          </Row>

          <Row className={` ${styles.scroll_content}`}>
            {regulatoryData &&
              regulatoryData.map(form => {
                if (form.value === "Regulatory Forms") {
                  return (
                    <>
                      <Col span={24} className={styles.content} key={form.id}>
                        {edit1 ? (
                          <>
                            <Row>
                              <Col span={18}>
                                <b>{form.name}</b>
                              </Col>
                              <Col span={6} className="align-right">
                                <Hicon
                                  icon="Cancel"
                                  onClick={() => setEdit1(false)}
                                  value={edit1}
                                  className="text-size-24"
                                />
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <Hicon
                                  icon="SaveIconWithoutBackground"
                                  className="text-size-24"
                                />
                              </Col>
                            </Row>
                            <Row key={form.id}>
                              <Col span={24} className={` ${styles.content}`}>
                                <Radio.Group
                                  key={uuid()}
                                  options={plainOptions}
                                  // options={form.value}
                                  // onChange={(event, options) =>
                                  //   onChange1({
                                  //     target: {
                                  //       name: form,
                                  //       value: event.target.value
                                  //     }
                                  //   })
                                  // }
                                  // onChange={onChange1}
                                  // value={form[value1]}
                                  value={value1}
                                  className={` ${styles.radioContent} text-bold `}
                                />
                              </Col>
                            </Row>
                          </>
                        ) : (
                          <Row>
                            <Col span={20}>
                              <b>{form.name}</b>
                            </Col>
                            <Col span={4} className="align-right">
                              <Hicon
                                icon="Pencil"
                                className="text-size-24"
                                onClick={() => setEdit1(true)}
                                value={edit1}
                              />
                            </Col>
                          </Row>
                        )}
                      </Col>
                      <Divider />
                    </>
                  );
                }
                return null;
                // return (
                //   <Col span={24} className={styles.content}>
                //     <b>No Forms included</b>
                //   </Col>
                // );
              })}
          </Row>
        </Col>
        <Col span={12} className={`${styles.outerBor} `}>
          <Row>
            <Col
              span={24}
              className={`text-size-18 ${styles.title} ${styles.section}`}
            >
              Employer Specific Forms
            </Col>
            <Divider />
          </Row>
          <Row className={` ${styles.scroll_content}`}>
            {regulatoryData &&
              regulatoryData.map(form => {
                if (form.value === "Employer Specific Forms") {
                  return (
                    <>
                      <Col span={24} className={styles.content} key={form.id}>
                        {edit1 ? (
                          <>
                            <Row>
                              <Col span={18}>
                                <b>{form.name}</b>
                              </Col>
                              <Col span={6} className="align-right">
                                <Hicon
                                  icon="Cancel"
                                  onClick={() => setEdit1(false)}
                                  // value={edit1}
                                  className="text-size-24"
                                />
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <Hicon
                                  icon="SaveIconWithoutBackground"
                                  className="text-size-24"
                                />
                              </Col>
                            </Row>
                            <Row key={form.id}>
                              <Col span={24} className={` ${styles.content}`}>
                                <Radio.Group
                                  key={uuid()}
                                  options={plainOptions}
                                  // options={form.value}
                                  // onChange={(event, options) =>
                                  //   onChange1({
                                  //     target: {
                                  //       name: form,
                                  //       value: event.target.value
                                  //     }
                                  //   })
                                  // }
                                  onChange={onChange1}
                                  // value={form[value1]}
                                  value={value1}
                                  className={` ${styles.radioContent} text-bold `}
                                />
                              </Col>
                            </Row>
                          </>
                        ) : (
                          <Row>
                            <Col span={20}>
                              <b>{form.name}</b>
                            </Col>
                            <Col span={4} className="align-right">
                              <Hicon
                                icon="Pencil"
                                className="text-size-24"
                                onClick={() => setEdit1(edit1 ? 0 : 1)}

                                // value={form.value}
                              />
                            </Col>
                          </Row>
                        )}
                      </Col>
                      <Divider />
                    </>
                  );
                }
                return null;
                // return (
                //   <Col span={24} className={styles.content}>
                //     <b>No Forms included</b>
                //   </Col>
                // );
              })}
          </Row>
        </Col>
      </Row>
      <Row>
        <Col span={24} className={styles.outerBor}>
          <Row>
            <Col
              span={10}
              className={`text-size-18 text-bold ${styles.title} ${styles.section}`}
            >
              New Forms Identified
            </Col>
            <Col
              span={8}
              className={`text-size-18 text-bold ${styles.title} ${styles.section}`}
            >
              Move To
            </Col>

            <Col
              span={6}
              className={`text-size-18 ${styles.title} ${styles.section}`}
            >
              {radioChecked ? (
                <div className="align-right">
                  <Button
                    onClick={() => isRadioChecked(radioChecked ? 0 : "")}
                    type="text"
                    className="text-size-14"
                  >
                    Cancel
                  </Button>
                  <Button
                    className={` border-radius-5 background_144182 text-size-14`}
                    type="primary"
                    htmlType="submit"
                    onClick={onSubmit}
                  >
                    <Hicon
                      icon="SaveIconWithoutBackground"
                      className="text-size-16"
                    >
                      <span className="text-size-14">Save</span>
                    </Hicon>
                  </Button>
                </div>
              ) : (
                <Button
                  className={` border-radius-5 background_144182 text-size-14 align-right`}
                  type="primary"
                  htmlType="submit"
                  disabled
                >
                  <Hicon
                    icon="SaveIconWithoutBackground"
                    className="text-size-16"
                  >
                    <span className="text-size-14">Save</span>
                  </Hicon>
                </Button>
              )}
            </Col>
          </Row>
          <Divider />
          {/* {console.log(NewFormsIdentified, value1)} */}
          <Row className={` ${styles.scroll_content}`}>
            {NewFormsIdentified &&
              NewFormsIdentified.map(form => {
                // {
                //   console.log(form[value1]);
                // }
                return (
                  <>
                    <Col span={10} className={styles.content}>
                      <ul className="color_144182 text-bold">{form.tittle} </ul>
                    </Col>
                    <Col span={14} className={` ${styles.content}`}>
                      <Radio.Group
                        key={uuid()}
                        // options={plainOptions}
                        // options={form.options}
                        onChange={(event, options) =>
                          onChange1({
                            target: {
                              id: event.target.id,
                              name: form,
                              value: event.target.value
                            }
                          })
                        }
                        // onChange={onChange1}
                        // value={form[value1]}
                        value={value1.map(radioData => {
                          form.options.map(
                            formDa =>
                              radioData.value === formDa.value &&
                              radioData.value
                          );
                        })}
                        checked={value1.filter(radioData => {
                          return radioData.name === form.tittle;
                        })}
                        className={` ${styles.radioContent} text-bold `}
                        radioChecked={1}
                      >
                        {form.options.map(opt => {
                          // console.log(opt.label);
                          return (
                            <>
                              <Radio value={opt.value}>{opt.value}</Radio>
                            </>
                          );
                        })}
                      </Radio.Group>
                    </Col>
                    <Divider />
                  </>
                );
              })}
          </Row>
        </Col>
      </Row>
    </>
  );
};

export default FormsToBeMaintained;

Answer 1

检查这个答案[https://stackoverflow.com/a/27784932/16314323[How](https://stackoverflow.com/a/27784932/16314323%5BHow)以在ReactJS中使用单选按钮？]