Antd 表单：将动态 id 与表单值一起传递答案

【问题标题】：Antd form: passing dynamic id alongside form-valuesAntd 表单：将动态 id 与表单值一起传递
【发布时间】：2021-10-23 14:32:53
【问题描述】：

我正在开发一个评论系统。每个 ID 都有一些 cmets。如果我想发表新评论，则 ID 必须与表单值一起传递。

ID 正在动态呈现：

{data && data.formations.map(formation =>
            <Row>
                <Col span={2}>
                    <p>ID: {formation.id}</p>
                </Col>
                ...

Form 有一个 Textarea，由于 Form.Item 中的 name 属性，值会自动传递。

<Form onFinish={onFinish}>
    <Form.Item name="comment">
        <TextArea rows={4} />
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit">Add comment</Button>
    </Form.Item>
</Form>

理想情况下，我希望 ID 与以下函数 OnFinish 中的值一起传递：

const onFinish = (values) *id somehwere here* => {
    console.log(values)
}

如何做到这一点？提前致谢！

【问题讨论】：

标签： reactjs forms antd

【解决方案1】：

您可以通过添加一个包含 ID 的隐藏字段来解决此问题：

<Form onFinish={onFinish}>
    <Form.Item name="comment">
        <TextArea rows={4} />
    </Form.Item>
    <Form.Item name="id">
        <Input type="hidden" value={formation.id} />
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit">Add comment</Button>
    </Form.Item>
</Form>

然后在 onFinish 回调中，您应该在 values 对象中获得一个新属性 id。

这是将已知/只读值与表单值一起传递的常用方法（在非 SPA/同步网络世界中，例如 PHP）。

【讨论】：