React+Hooks 实现每次添加或删除一组属性

最新推荐文章于 2024-09-26 08:48:23 发布

独行浅秋

最新推荐文章于 2024-09-26 08:48:23 发布

阅读量222

点赞数 1

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_67150966/article/details/141132199

版权

点击添加后：

import { ModalForm } from '@ant-design/pro-form';
import React, { useEffect, useRef, useState } from 'react';
import { Row, Col, message, Select } from 'antd';
const CreateFormNew = (props) => {
  const formRefNew = useRef();
  const [subArr, setSubArr] = useState([]);//上级单位下拉框
  const [modeList, setModeList] = useState([]);//运行方式下拉框
  const [items, setItems] = useState([]);
  const [modeSubmit, setModeSubmit] = useState([]);

  const addItem = () => {
    let key = new Date().getTime();
    const newItem = {
      id: key,
      value: `Item ${key}`,
    };
    setItems([...items, newItem]);
    const newMode = { key, substationId: '', modeId: '' };
    setModeSubmit([...modeSubmit, newMode]);
  };

  const removeItem = (itemId) => {
    setItems(items.filter((item) => item.id !== itemId));
    setModeSubmit(modeSubmit.filter((item) => item.key !== itemId));
  };
  useEffect(() => {
    //此处可用接口返回下拉框的数据
    setSubArr([{
      label: "上级单位A",
      value: "deptA",
      children: [
        {
          label: "运行方式A",
          value: "deptA_typeA",
        },
        {
          label: "运行方式B",
          value: "deptA_typeB",
        },
        {
          label: "运行方式C",
          value: "deptA_typeC",
        }
      ]
    }, {
      label: "上级单位B",
      value: "deptB",
      children: [
        {
          label: "运行方式A",
          value: "deptB_typeA",
        },
        {
          label: "运行方式B",
          value: "deptB_typeB",
        },
        {
          label: "运行方式C",
          value: "deptB_typeC",
        }
      ]
    }
    ])
  }, [])
  return (
    <ModalForm
      title={"新增"}
      width={800}
      formRef={formRefNew}
      visible={props?.visible}//显示ModalForm
      onVisibleChange={props?.onVisibleChange}//显示控制ModalForm
      onFinish={(value) => {
        console.log(modeSubmit);
      }}
    >
      <Row>
        <Col style={{ width: '20.8%', textAlign: 'right', color: 'white' }}>外电网运行方式：</Col>
        <Col style={{ width: '75%' }}>
          <a style={{
                background: '#1890ff',
                borderRadius: '3px',
                padding: '2px 4px',
                color: '#fff',
              }} onClick={() => { addItem(); }} >
            添加
          </a>
          &nbsp;&nbsp;
          <ul style={{ clear: 'both', padding: '10px 0', margin: 0 }}>
            {items.map((item) => (
              <li key={item.id} style={{ marginBottom: '5px' }}>
                <Select
                  placeholder="请选择上级单位"
                  style={{ width: 180, margin: '0 0 8px' }}
                  onChange={(e) => {
                    setModeList(subArr.find((it) => it.value == e).children);
                    if (JSON.stringify(modeSubmit) == '[]' || !modeSubmit[0]) return;
                    let obj = modeSubmit.find((it) => it.key === item.id);
                    if (obj) {
                      setModeSubmit(
                        modeSubmit.map((it) => {
                          if (it.key === item.id) {
                            return { ...it, substationId: e };
                          } else {
                            return it;
                          }
                        }),
                      );
                    } else {
                      message.warn('请先选择上级单位');
                    }
                  }}
                  options={subArr}
                ></Select>
                <Select
                  style={{ width: 220, margin: '0 8px' }}
                  placeholder="请选择运行方式"
                  options={modeList}
                  onChange={(e) => {
                    if (JSON.stringify(modeSubmit) == '[]' || !modeSubmit[0]) return;
                    let obj = modeSubmit.find((it) => it.key === item.id);
                    if (obj) {
                      setModeSubmit(
                        modeSubmit.map((it) => {
                          if (it.key === item.id) {
                            if (!it.substationId) {
                              message.warning('请先选择上级单位');
                            }
                            return { ...it, modeId: e };
                          } else {
                            return it;
                          }
                        }),
                      );
                    } else {
                      message.warn('请先选择上级单位');
                    }
                  }}
                ></Select>
                <a  style={{
                    background: '#1890ff',
                    borderRadius: '3px',
                    padding: '2px 4px',
                    color: '#fff',
                  }} onClick={() => removeItem(item.id)} >
                  删除
                </a>
              </li>
            ))}
          </ul>
        </Col>
      </Row>
    </ModalForm>
  );
};
export default CreateFormNew;