Question

我正在使用react-validation来验证登录表单。提交表单后我想知道是否有错误。我可以通过以下方式在我的自定义按钮对象中获取错误状态。

const customSubmit = ({ hasErrors, ...props }) => {
  return <Button disabled={hasErrors} >Login</Button>
  {hasErrors.toString()}/>
};
const SubmitButton = button(customSubmit);

我希望如果有任何方法可以通过this.form获得hassErros状态。提交来自？

时，有什么方法可以获得hassErro状态

Answer 1

当我使用State和handleChange来获取按钮中的错误时，我可以共享类似的代码。首先，需要一个函数来声明useState。

import React from "react";
import { Box, Button, Collapse, Grid, TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

     function FormVal() {
      const [phone, setPhone] = React.useState<string>();
      const [errors, setErrors] = React.useState<{ phone: string }>();
      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const {
          target: { value },
        } = event;
        setErrors({ phone: "" });
        setPhone(value);
        let reg = new RegExp(/^\d*$/).test(value);

     if (!reg) {
          setErrors({ phone: "Only numbers" });
        }
};

现在，在return部分中，您需要声明handleChange。可能有一些您不知道的元素，例如，这是因为我正在使用Material-ui。

     return (
    <Box className={classes.root} width="100%" padding="5px">
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <TextField
            id="outlined-basic"
            autoComplete="off"
            value={phone}
            label="phone number"
            inputProps={{ maxLength: 255 }}
            onChange={handleChange}
            required
            error={Boolean(errors?.phone)}
            helperText={errors?.phone}
            variant="outlined"
          />
        </Grid>
        <Collapse in={phone?.length! > 0}>
          <div style={{ width: "100%" }}>
            <Button variant="contained">Save</Button>
          </div>
        </Collapse>
      </Grid>
    </Box>
  );
}
export default FormVal;

ReactJS，react-validation hasErrors问题

1 个答案: