上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

一个modal中使用form遇到的一些问题

[复制链接]
  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    437

    回帖

    943

    积分

    荣誉开发者

    积分
    943

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-10-20 21:58:10 | 显示全部楼层 | 阅读模式

    本帖最后由 wwwwwllllk 于 2022-10-20 21:59 编辑

    modal中需要填写,所以用了antd-design的modal和form组件。

    问题一:如何使用mdal的确定事件提交表单的值
    通过使用useRef解决

    console.log(form.current.getFieldsValue());

    问题二:表单中的显示内容有关联。(选中物品就要显示价格,这里也好实现。但是后端传值的时候物品和价格都要传,)
    image.png

    image.png

    QQ图片20221020215005.png

    但是这样写以后传的又是对象,所以总有点小瑕疵,但总比字段不统一拼接传值好很多了。
    但是用了modal,form的必填项只是提示,而不是强制限制了。所以我需要加代码来进行限制。

    import React, { useState, useRef } from "react";
    import "antd/dist/antd.css";
    import "./index.css";
    import { Button, Modal, Form, Input, Select } from "antd";
    const { Option } = Select;
    const App: React.FC = () => {
      const [isModalOpen, setIsModalOpen] = useState(false);
      const form = useRef();
      const userInfo = { idCard: "340202197104106891", earthday: "1971" };
      const showModal = () => {
        setIsModalOpen(true);
      };
      const goods = [
        { name: "笔记本", price: "8000" },
        { name: "铅笔", price: "2" },
        { name: "笔筒", price: "4" }
      ];
    
      const handleOk = () => {
        // setIsModalOpen(false);
        // console.log(form.current.submit());
        console.log(form.current.getFieldsValue());
      };
    
      const handleCancel = () => {
        setIsModalOpen(false);
      };
      const onFinish = (values: any) => {
        console.log("Success:", values);
      };
    
      const onFinishFailed = (errorInfo: any) => {
        console.log("Failed:", errorInfo);
      };
      const handleChange = (value: string,evt) => {
        console.log(evt);
        form.current.setFieldsValue({'price': evt.value})
        // 可能存在名字一样但是价格不一样的情况
      };
    
      return (
        <>
          <Button type="primary" onClick={showModal}>
            填写入职表
          </Button>
          <Modal
            title="入职表"
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
          >
            <Form
              name="basic"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
              ref={form}
            >
              {/* <Form.Item
                label="姓名"
                name="username"
                rules={[{ required: true, message: "请输入姓名" }]}
              >
                <Input />
              </Form.Item> */}
    
              {/* <Form.Item
                label="年龄"
                name="age"
                rules={[{ required: true, message: "请输入年龄" }]}
              >
                <Input />
              </Form.Item> */}
              <Form.Item
                label="物品"
                name="goods"
                rules={[{ required: true, message: "身份证号" }]}
              >
                <Select style={{ width: 120 }} onChange={handleChange} labelInValue>
                  {goods.map((good,index) => {
                    return <Option key={index} value={good.price}>{good.name}</Option>;
                  })}
                </Select>
              </Form.Item>
              <Form.Item
                label="价格"
                name="price"
                rules={[{ required: true, message: "价格" }]}
              >
                <Input/>
              </Form.Item>
            </Form>
          </Modal>
        </>
      );
    };
    
    export default App;
    
    I frequently record, because want to leave something.
  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    284

    主题

    3805

    回帖

    3736

    积分

    管理员

    积分
    3736

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-10-20 22:02:45 | 显示全部楼层
    哥哥这是在学react么?
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    437

    回帖

    943

    积分

    荣誉开发者

    积分
    943

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-10-20 22:05:11 | 显示全部楼层
    王一之 发表于 2022-10-20 22:02
    哥哥这是在学react么?

    梳理一下思路。早知道踩这么多坑,我直接useState加input不用表单了
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表