ant design react 表单设置初始值及更新表单数据

import React from 'react';
import './index.css';
import { Button, Form, Input } from 'antd';
const App = () => {
  const [form] = Form.useForm();

  const updateValue = () => {
    // 假设我们要更新的字段是 'username'

    form.setFieldsValue({ username: '新用户名' });  //更新字段
  };

  return (
    <Form
      name="wrap"
      form={form}  //绑定表单
      initialValues={{ username: 'zhang', password: '[email protected]' }} //设置初始值
      labelCol={{
        flex: '110px',
      }}
      labelAlign="left"
      labelWrap
      wrapperCol={{
        flex: 1,
      }}
      colon={false}
      style={{
        maxWidth: 600,
      }}
    >
      <Form.Item
        label="Normal label"
        name="username"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="A super long label text"
        name="password"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item label=" ">
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button type="primary" onClick={updateValue}>
          Update
        </Button>
      </Form.Item>
    </Form>
  );
};
export default App;