Ant Design表单回填修改

最新推荐文章于 2024-06-09 18:28:29 发布

関西

最新推荐文章于 2024-06-09 18:28:29 发布

阅读量286

点赞数

文章标签： ui 前端

本文链接：https://blog.csdn.net/weixin_63813990/article/details/131883861

版权

<Modal title="Basic Modal" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish1}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                >
                    <Form.Item
                        label="名称"
                        name="name"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="日期" name="ktime">
                        <DatePicker showTime />
                    </Form.Item>
                    <Form.Item label="日期" name="jtime">
                        <DatePicker showTime />
                    </Form.Item>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form>
            </Modal>

{
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => editd(record)}>编辑</a>
                    <a>Delete</a>
                </Space>
            ),
        },

const [form] = Form.useForm()
    const editd = (record) => {
        form.setFieldsValue({
            id:record._id,
            name: record.name,
            ktime: moment(record.ktime),
            jtime: moment(record.jtime),
        });
        setIsModalOpen1(true); // 打开编辑模态框
    };

router.post("/cegai",async(req,res)=>{
  let data = req.body.data
  let id = req.query.id
  await guangModel.updateOne({_id:id},{name:data.name,ktime:data.ktime,jtime:data.jtime})
})

const onFinish1 = (e)=>{
        axios.post("http://127.0.0.1:3000/cegai?id="+e.id,{data:{name: e.name, ktime: e.ktime, jtime: e.jtime}})
        setIsModalOpen1(false)
    }