React表单：如何实现提交按钮点击后才显示订阅成功提示文本？

实现方案 #

你可以通过以下两种方式实现提交后才显示成功提示的效果：

方法1：使用Final Form内置状态（最简方案） #

React Final Form的render回调默认提供submitSucceeded参数，会自动识别表单是否提交成功，无需额外声明自定义状态，修改代码如下：

<div className={classes.root}>
      <Form
        onSubmit={onSubmit}
        initialValues={{ datasetName: 'dataset.csv', contactEmail: 'johndoe@example.com', uploadFile: 'sample.csv' }}
        validate={validate}
        {/* 新增submitSucceeded参数 */}
        render={({ handleSubmit, form, submitting, pristine, values, submitSucceeded }) => (
          <form onSubmit={handleSubmit} noValidate>


          ...

              <Grid item xs={12}>
                <Button
                  variant="contained"
                  color="primary"
                  type="submit"
                  disabled={submitting}
                >
                  Submit
                </Button>
              </Grid>
              <Grid item xs={12}>
                {/* 条件渲染：仅提交成功后显示提示 */}
                {submitSucceeded && <Typography name='subscribeMessage' variant='caption'>You have subscribed!</Typography>}
              </Grid>

            </Grid>
          </form>
        )}
      />

如果你的onSubmit异步逻辑抛出错误，submitSucceeded不会自动变为true，符合真实业务里提交失败不显示成功提示的需求。

方法2：自定义本地状态（灵活控制场景） #

如果后续需要自定义提示的隐藏逻辑（比如3秒后自动消失），可以自己维护状态：

1. 先在组件内声明状态：

import { useState } from 'react';

// 组件内部代码
const [showSuccessTip, setShowSuccessTip] = useState(false);

2. 修改onSubmit函数，提交完成后更新状态：

const onSubmit = async values => {
    console.log('Submitting subscribe form!');
    console.log('Subscribe form values:', values);
    // 提交成功后修改状态显示提示
    setShowSuccessTip(true);
    // 可选：3秒后自动隐藏提示
    // setTimeout(() => setShowSuccessTip(false), 3000);
}

3. 修改Typography部分做条件渲染：

{showSuccessTip && <Typography name='subscribeMessage' variant='caption'>You have subscribed!</Typography>}

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