当外部组件的状态更改时，更改React final form字段的值

import { Form, Field } from 'react-final-form';

// 外部组件
const ExternalComponent = ({ updateValue }) => {
  // 模拟外部状态更改
  const handleStatusChange = () => {
    const newValue = 'new value';

    // 获取表单API
    const form = document.querySelector('form').form;

    // 更改字段的值
    form.change('fieldName', newValue);

    // 或者使用Field组件的render属性更改字段的值
    updateValue(newValue);
  };

  return (
    <div>
      <button onClick={handleStatusChange}>改变状态</button>
    </div>
  );
};

// 表单组件
const MyForm = () => {
  // 初始化表单字段的值
  const initialValues = { fieldName: 'initial value' };

  return (
    <Form
      initialValues={initialValues}
      onSubmit={handleSubmit}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <Field name="fieldName" component="input" />

          <ExternalComponent updateValue={newValue => handleSubmit({ fieldName: newValue })} />

          <button type="submit">提交</button>
        </form>
      )}
    />
  );
};