React 表单中的必填字段不需要文本输入

Question

我有一个订阅对话框。我希望电子邮件字段是必需的，但我目前可以使用空白电子邮件地址提交我的表单（这对客户来说是一个主要问题！）。我在我的代码中将它标记为要求，但这似乎并没有转化为我的 UI。

我正在使用 Material UI 进行样式设置。

衷心感谢任何指针:)

在图片中，看看我是如何在没有电子邮件地址的情况下点击订阅的（点击订阅后会出现提交消息）。

import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import { Form } from 'react-final-form';


const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2)
  },
  divider: {
    marginBottom: theme.spacing(2)
  }
}));

export default function SubscribeFormResults() {

  const classes = useStyles();

  const [open, setOpen] = React.useState(false);
  const [formSubmitted, setFormSubmitted] = React.useState(false);

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

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setFormSubmitted(false);
  };

  const validate = values => {
    const errors = {};
    if (!values.userEmail) {
      errors.userEmail = 'Required';
    }
    return errors;
  };

  return (
    <div>
      <Button size="small" color="primary" onClick={handleClickOpen}>
        Subscribe
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <Form
            onSubmit={onSubmit}
            initialValues={{ userEmail: 'johndoe@example.com', arn: 'Connect to Backend!' }}
            validate={validate}
            render={({ handleSubmit, form, submitting, pristine, values }) => (
              <form onSubmit={handleSubmit} noValidate>

                <DialogContentText>
                  To subscribe to this website, please enter your email address here. We will send updates
                  occasionally.
                </DialogContentText>

                <TextField
                  label="Email Address"
                  name="userEmail"
                  margin="none"
                  required={true}
                  fullWidth
                />

                {formSubmitted && <Grid item xs={12}>
                  <Typography name='submitMessage' variant='subtitle1'>You have subscribed to AA-01-23-45-678901-2. {/* Connect to backend here */}</Typography>
                </Grid>}

                <DialogActions>
                  <Button /* onClick={handleClose} */ color="primary" type="submit" disabled={submitting}>
                    Subscribe
                  </Button>
                  <Button onClick={handleClose} color="primary">
                    Close
                  </Button>
                </DialogActions>

              </form>
              )}
            />
          </DialogContent>
      </Dialog>
    </div>
  );
}

Answer 1

对于未来的读者，我通过从 Material UI、大写形式标签中删除验证参数并使用标准的小写形式标签强制验证来解决此问题。