antd-design的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 (
    <>
      
        填写入职表
      
      
        
{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          ref={form}
        >
          {/* 
            
           */}

          {/* 
            
           */}
          
            { width: 120 }} onChange={handleChange} labelInValue>
              {goods.map((good,index) => {
                return {good.name};
              })}
            
          
          
            
          
        
      
    
  );
};

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102