首页 > 其他分享 >demo

demo

时间:2023-12-23 09:04:00浏览次数:25  
标签:const form Form selectItem updatedSelectItem demo import

import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, Checkbox } from 'antd';
import { useForm } from 'antd/lib/form/Form';

interface ResourceSelectProps {
  form: ReturnType<typeof useForm>;
}

const ResourceSelect: React.FC<ResourceSelectProps> = ({ form }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectItem, setSelectItem] = useState<string[]>([]);

  const showModal = () => {
    setModalVisible(true);
  };

  const handleOk = () => {
    form.setFieldsValue({ professionKnowledge: selectItem });
    setModalVisible(false);
  };

  const handleCancel = () => {
    setModalVisible(false);
  };

  const handleCheckboxChange = (value: string) => {
    const updatedSelectItem = [...selectItem];
    if (updatedSelectItem.includes(value)) {
      updatedSelectItem.splice(updatedSelectItem.indexOf(value), 1);
    } else {
      updatedSelectItem.push(value);
    }
    setSelectItem(updatedSelectItem);
  };

  useEffect(() => {
    form.setFieldsValue({ professionKnowledge: selectItem });
  }, [selectItem, form]);

  return (
    <>
      <Form.Item
        label="涉及专业知识"
        name="professionKnowledge"
        rules={[{ required: true, message: '请选择涉及专业知识' }]}
      >
        <Button type="primary" onClick={showModal}>
          选择资源
        </Button>
      </Form.Item>

      <Modal title="选择资源" visible={modalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Checkbox value="A" onChange={() => handleCheckboxChange('A')}>
          A
        </Checkbox>
        <Checkbox value="B" onChange={() => handleCheckboxChange('B')}>
          B
        </Checkbox>
        <Checkbox value="C" onChange={() => handleCheckboxChange('C')}>
          C
        </Checkbox>
      </Modal>
    </>
  );
};

export default ResourceSelect;
父组件
import React from 'react';
import { Form, Button, Space } from 'antd';
import ResourceSelect from './ResourceSelect';

const ParentForm: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = async (values: any) => {
    // 在这里可以进行提交表单的操作
    console.log('Form values:', values);
  };

  const validateSelectItem = () => {
    // 自定义校验规则,检查是否选择了盒子
    if (!form.getFieldValue('professionKnowledge')?.length) {
      return Promise.reject('请完成选择');
    }
    return Promise.resolve();
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <ResourceSelect form={form} />

      <Form.Item
        label="其他字段"
        name="otherField"
        rules={[{ required: true, message: '其他字段不能为空' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="创建场景"
        shouldUpdate
        rules={[{ validator: validateSelectItem }]}
      >
        {() => (
          <Space>
            <Button type="primary" htmlType="submit">
              完成
            </Button>
          </Space>
        )}
      </Form.Item>
    </Form>
  );
};

export default ParentForm;

 

 

标签:const,form,Form,selectItem,updatedSelectItem,demo,import
From: https://www.cnblogs.com/cyanKoi/p/17922664.html

相关文章

  • 003元素定位方式与项目demo创建
    一、环境搭建1、创建项目,添加java-client依赖包             新建maven项目,引入java-client依赖包       2、创建并编写代码 测试运行以上代码,运行前需打开Appnium.Appnium没有打开时,运行会报错:Connectionrefused:connect 二、......
  • openPlant实时数据库使用demo
    相关依赖由于没有com.magus.jdbc.jar依赖,需要手动下载防止lib下进行配置<dependency> <groupId>com.magus</groupId> <artifactId>jdbc</artifactId> <version>3.0</version> <scope>system</scope> <systemPath>${basedir}/lib/c......
  • des加密,url编码,url解码,des解密 DEMO
    des加密,url编码,url解码,des解密DEMOpackagecom.example.core.mydemo.des;importjavax.crypto.Cipher;importjavax.crypto.SecretKey;importjavax.crypto.SecretKeyFactory;importjavax.crypto.spec.DESKeySpec;importjava.net.URLDecoder;importjava.net.URLEncod......
  • rancher harvester deploy demo 【部署 harvester v1.2.1】
    简介Harvester是一个现代的、开放的、可互操作的、基于Kubernetes的超融合基础设施(HCI)解决方案。它是一种开源替代方案,专为寻求云原生HCI解决方案的运营商而设计。Harvester运行在裸机服务器上,提供集成的虚拟化和分布式存储功能。除了传统的虚拟机(vm)之外,Harvester还通过与Ranc......
  • Java五种设计模式实现奶茶订单生成系统小DEMO
    前言这是大学时候上设计模式这门课写的程序,当时课程任务是要求结合五个设计模式写一个系统,最近偶然翻到,把系统分享一下。成品预览主界面​功能介绍订单管理系统,实现了对订单的增删改查。且实现了将订单内容写入文件,每次增删改查都会做保存,下次重启程序时......
  • 作用域链demon练习
    demon1functiontest(){console.log(b);//undefinedif(a){varb=100;}console.log(b)////undefinedc=234;console.log(c)//234}vara;test();a=10;console.log(c)//234//分析//VO={//a:und......
  • react+antd 需求demo实现
    BoxSelectionComponent.tsximportReact,{useState}from'react';import{Modal,Button,Table,message}from'antd';constBoxSelectionComponent:React.FC=()=>{const[modalVisible,setModalVisible]=useState(false);......
  • WPF透明框设置Demo
    <Windowx:Class="GuiDB.EBMultiEditTextWin"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http......
  • 写了一个flinkcdc的简单demo,大概说一下实现过程和建议点
    架构图大致如下:版本信息大致如下,具体版本信息根据自己的需求进行调整即可:oracle:19cflinkcdc:2.4.0kafka:3.1.2flink:1.15.4mysql:8.0.27springboot:2.5.6实现需求:1.使用flinkcdc采集oracle中的数据(历史数据+增量数据:含增删改)同步至kafka的某个topic中2.使用flink消费kafka中......
  • 真机调试 Flutter 报错:Lookup failed: title in @getters in MyHomePage in package:f
    发生缘由学习Flutter更改lib目录下面的main.dart文件之后真机调试运行flutterrun报错:1#小组件库异常2══╡EXCEPTIONCAUGHTBYWIDGETSLIBRARY╞═══════════════════════════════════════════════════......