React是一个流行的JavaScript库，用于构建用户界面。它提供了一种简单而高效的方式来创建交互式的Web应用程序。而antd（Ant Design）是一个基于React的UI组件库，它提供了丰富的UI组件和样式，帮助开发者更快速地构建出美观的用户界面。
在React应用程序中，表单是常见的用户交互元素。antd提供了Form组件，用于处理表单的状态和验证。form.setFieldsValue是antd Form组件中的一个方法，用于动态设置表单字段的值。
使用form.setFieldsValue方法可以在React中非常方便地更新表单字段的值。它接受一个对象作为参数，对象的键是表单字段的名称，值是要设置的字段值。例如，假设我们有一个包含用户名和密码字段的表单，我们可以使用form.setFieldsValue方法来设置这些字段的值。
在使用form.setFieldsValue之前，我们需要先创建一个表单实例。在React中，我们可以使用useState钩子来创建表单实例。下面是一个示例代码：
import React, { useState } from 'react';import { Form, Input, Button } from 'antd';const MyForm = () => { const [form] = Form.useForm(); const [formData, setFormData] = useState({}); const handleSubmit = () => { // 处理表单提交逻辑 console.log(formData); }; const handleInputChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSetFieldsValue = () => { form.setFieldsValue({ username: 'John Doe', password: '123456' }); }; return ( <Form form={form} onFinish={handleSubmit}> <Form.Item name="username" label="用户名"> <Input name="username" onChange={handleInputChange} /> </Form.Item> <Form.Item name="password" label="密码"> <Input.Password name="password" onChange={handleInputChange} /> </Form.Item> <Button type="primary" onClick={handleSetFieldsValue}>设置字段值</Button> <Button type="primary" htmlType="submit">提交</Button> </Form> );};export default MyForm;在上面的代码中，我们首先使用useState钩子创建了一个名为formData的状态变量，用于保存表单字段的值。然后，我们使用Form.useForm()方法创建了一个表单实例，并将其赋值给form变量。接下来，我们定义了一个handleSubmit函数，用于处理表单的提交逻辑。在handleInputChange函数中，我们使用setFormData函数来更新formData状态变量的值。
最后，我们定义了一个handleSetFieldsValue函数，用于在点击按钮时设置表单字段的值。在这个函数中，我们使用form.setFieldsValue方法来设置表单字段的值。在这个示例中，我们设置了username字段的值为"John Doe"，password字段的值为"123456"。
当用户点击"设置字段值"按钮时，表单字段的值将被更新为我们指定的值。这使得我们可以在不直接修改表单字段的情况下，动态地设置表单字段的值。
总结一下，form.setFieldsValue是antd Form组件中的一个方法，用于动态设置表单字段的值。它接受一个对象作为参数，对象的键是表单字段的名称，值是要设置的字段值。通过使用这个方法，我们可以在React应用程序中方便地更新表单字段的值，从而实现更灵活和交互性的表单功能。
来源地址：https://blog.csdn.net/TianXuab/article/details/132520195
