Ant Design Form调用form.setFieldsValue()后输入框未同步更新

问题描述 #

在React中使用Ant Design Form时，通过自定义AI生成组件TextGenarateur程序化更新输入框值，调用form.setFieldsValue({ 'name': generatedText })后，表单状态（form.getFieldValue('name')）已正确更新，但输入框未即时显示新值，需其他交互触发重渲染或聚焦才会更新。

相关代码如下：

<div className="mt-1 py-2">
  <Form.Item
    name={'name'}
    label={setLocale(true, "name")}
    rules={[{ required: true, message: 'Please input your meet name' }]}
  >
    <div className="d-flex align-items-center">
      <Input className="flex-grow-1 me-2 mr-2" />
      
      {hasAi && (
        <TextGenarateur
          prefix={"generate meet title in maximum 5 words:"}
          form={form}
          name={"name"}
          title="ai.text.generateur.title"
          onOk={(generatedText) => {
            form.setFieldsValue({ 'name': generatedText });
          }}
        />
      )}
    </div>
  </Form.Item>
</div>

const handleClick = () => {
  const textValue = form?.getFieldValue(name) ? form?.getFieldValue(name) : text;
  const values = {
    message: "Provide a straightforward response for this Action => " + prefix + ' ' + (textValue ? textValue : "New Meeting"),
  };
  setIsLoading(true);
  MeetServices.generateText(values).then((res) => {
    onOk(res.data[0]);
  }).finally(() => {
    setIsLoading(false);
  }).catch((err) => {
    console.error(err);
  });
};

问题流程：

• TextGenarateur组件触发onOk回调获取生成文本
• 调用form.setFieldsValue更新name字段值
• 表单状态已更新，但输入框视觉未同步显示新值
• 需其他交互触发才会显示更新后的值

预期行为：调用form.setFieldsValue({ 'name': generatedText })后，输入框立即显示生成的新文本。

原因及解决方案 #

核心原因 #

Ant Design Form的Form.Item需要直接包裹表单控件（如Input）才能建立状态绑定，当前代码中Form.Item的直接子元素是div容器，导致Input无法通过上下文自动同步表单状态，因此调用setFieldsValue后视图未更新。

解决办法 #

方法一：调整结构，让Form.Item直接绑定Input

将Input作为Form.Item的直接子元素，把TextGenarateur移到Form.Item外部保持布局：

<div className="mt-1 py-2">
  <Form.Item
    name={'name'}
    label={setLocale(true, "name")}
    rules={[{ required: true, message: 'Please input your meet name' }]}
  >
    <Input className="flex-grow-1 me-2 mr-2" />
  </Form.Item>
  {hasAi && (
    <div className="d-flex justify-content-end mt-2">
      <TextGenarateur
        prefix={"generate meet title in maximum 5 words:"}
        form={form}
        name={"name"}
        title="ai.text.generateur.title"
        onOk={(generatedText) => {
          form.setFieldsValue({ 'name': generatedText });
        }}
      />
    </div>
  )}
</div>

方法二：用getValueProps手动同步值（保留原布局）

若需维持原有布局，通过Form.Item的getValueProps方法手动将表单值传递给Input：

<div className="mt-1 py-2">
  <Form.Item
    name={'name'}
    label={setLocale(true, "name")}
    rules={[{ required: true, message: 'Please input your meet name' }]}
    getValueProps={(value) => ({ value })}
  >
    <div className="d-flex align-items-center">
      <Input className="flex-grow-1 me-2 mr-2" />
      
      {hasAi && (
        <TextGenarateur
          prefix={"generate meet title in maximum 5 words:"}
          form={form}
          name={"name"}
          title="ai.text.generateur.title"
          onOk={(generatedText) => {
            form.setFieldsValue({ 'name': generatedText });
          }}
        />
      )}
    </div>
  </Form.Item>
</div>

方法三：手动触发输入框更新（临时方案）

如果无法立即调整结构，可在onOk回调中手动操作DOM同步值：

onOk={(generatedText) => {
  form.setFieldsValue({ 'name': generatedText });
  // 根据实际场景选择Input的选择器
  const inputEl = document.querySelector('.flex-grow-1.me-2.mr-2');
  if (inputEl) {
    inputEl.value = generatedText;
    // 触发change事件确保Form感知变化
    inputEl.dispatchEvent(new Event('change', { bubbles: true }));
  }
}}

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