使用错误和 helperText 响应材料 UI 表单验证

Question

我创建了一个表单，我想在其中验证输入，我看到材质 UI有一个名为 bolean 的属性error和另一个名为helperTextfor 的属性TextField表单输入的属性，但我没有找到有关如何在元素上注入该错误的信息。验证条件未满足 这是我的代码示例：https://codesandbox.io/s/material-demo-hip84 ?file=/demo.js:1020-1055

const [form, setForm] = useState({ name: "", email: "", remember: "" });

  const onChange = i => {
    setForm({ ...form, [i.target.name]: i.target.value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log(form);
    e.target.reset();
  };

  return (
    <form className={classes.root} autoComplete="off" onSubmit={handleSubmit}>
      <Grid container spacing={4}>
        {Object.keys(form).map((objKey, idx) => {
          return (
            <Grid item xs={12} sm={6} md={4} key={idx}>
              <TextField
                error
                helperText="No Value added in this field"
                id={`input${idx}`}
                label={objKey}
                name={objKey}
                fullWidth={true}
                onChange={onChange}
              />
            </Grid>
          );
        })}
        <Grid item xs={12} sm={12} md={12}>
          <Button type="submit" variant="contained" color="primary">
            Submit
          </Button>
        </Grid>
      </Grid>
    </form>
  );

Answer 1

要使用error的属性，TextField您需要自己管理错误（就像管理字段的值一样）。

为此， 的值error不应固定，而应根据您正在进行的某些计算为真/假。

我使用您的代码来检查值（每个字段）是否等于特定值。这不是一个现实生活中的示例，您可能想将其更改为某种正则表达式检查，但这应该为您提供一个很好的起点：

export default function SubmitForm() {
  const classes = useStyles();
  const [form, setForm] = useState({ name: "aaa", email: "bbb", remember: "ccc" });
  const isValidData = {name: "aaa", email: "bbb", remember: "ccc"};

  ...

  const checkIsValid = (fieldName, value) => {
    // Here you probably what to check this to some regex validation
    if (isValidData[fieldName] === value) {
      return true;
    }
    return false;
  }

  return (
        ...
        {Object.keys(form).map((objKey, idx) => {
          return (
            <Grid item xs={12} sm={6} md={4} key={idx}>
              <TextField
                error={!checkIsValid(objKey, form[objKey])}
                ...
              />
            </Grid>
          );
        })}
  );
}

要查看完整的工作示例，请检查： https: //codesandbox.io/s/mui-textfield-control-errors-z0tfo? file=/demo.js