Antd Form提交时如何将动态ID与表单值一并传递给onFinish函数

实现方案 #

你可以通过以下两种方式获取动态ID： #

方案1：回调绑定ID（最直接）

在遍历渲染每个评论区块时，给表单的onFinish回调提前绑定当前遍历到的formation.id：

// 动态渲染部分修改
{data && data.formations.map(formation =>
            <Row key={formation.id}>
                <Col span={2}>
                    <p>ID: {formation.id}</p>
                </Col>
                {/* 表单部分，用箭头函数透传id */}
                <Form onFinish={(values) => onFinish(values, formation.id)}>
                    <Form.Item name="comment">
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">Add comment</Button>
                    </Form.Item>
                </Form>
                ...
)}

对应onFinish函数调整参数即可：

const onFinish = (values, id) => {
    console.log('表单收集内容：', values)
    console.log('当前对应动态ID：', id)
    // 后续提交逻辑
}

方案2：隐藏表单项存储ID

利用Form自动收集表单项值的特性，新增隐藏的表单项存储ID，无需修改回调参数：

// 表单部分新增隐藏表单项
<Form onFinish={onFinish}>
    <Form.Item name="formationId" initialValue={formation.id} hidden />
    <Form.Item name="comment">
        <TextArea rows={4} />
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit">Add comment</Button>
    </Form.Item>
</Form>

直接在onFinish的values里取ID即可：

const onFinish = (values) => {
    console.log('评论内容：', values.comment)
    console.log('当前对应动态ID：', values.formationId)
}

注意：遍历渲染的Row组件需要添加key={formation.id}属性，避免React渲染警告。

内容的提问来源于stack exchange，提问作者Max