React：如何让提交按钮和文本标签相互通信？

Question

我有一个小表格，其中的一个子集如下所示：

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


          ...

              <Grid item xs={12}>
                <Button
                  variant="contained"
                  color="primary"
                  type="submit"
                  disabled={submitting}
                >
                  Submit
                </Button>
              </Grid>
              <Grid item xs={12}>
                <Typography name='subscribeMessage' variant='caption'>You have subscribed!</Typography>
              </Grid>

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

我也有一个 onSubmit 函数，但我只想要 text/label“您已订阅！”单击按钮后出现。如何让此文本仅在用户单击提交按钮后出现？

作为参考，我的提交函数如下所示：

const onSubmit = async values => {
    console.log('Submitting subscribe form!');
    console.log('Subscribe form values:', values);
}

我目前只做前端这方面的工作

Answer 1

您可以添加一个内部状态来检查提交并根据它显示提交文本。

const [formSubmitted, setFormSubmitted] = useState(false)

并在提交成功后设置为true

const onSubmit = async values => {
    console.log('Submitting subscribe form!');
    console.log('Subscribe form values:', values);
    setFormSubmitted(true)
}

如果 formSubmitted 为真

，则呈现提交的消息

{formSubmitted  && <Grid item xs={12}>
   <Typography name='subscribeMessage' variant='caption'>You have subscribed!</Typography>
 </Grid>}

React：如何让提交按钮和文本标签相互通信？

React: How to get submit button and text label to communicate with each other?

javascript

reactjs

forms

submit

form-submit