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 (
    <>
      <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;