javascript - 使用错误和 helperText react Material UI 表单验证

Question

我创建了一个表单，我想在上面验证输入，我看到 ma​​terial UI 有一个名为 error boleean 的属性和另一个名为 helperText 的属性 用于表单的 TextField 输入，但我没有发现任何有关如何在未满足验证条件时在元素上注入(inject)该错误的信息 这是我的代码示例: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

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

要做到这一点 - error 的值不应该是固定的，而应该是 true/false，基于你正在做的一些计算。

我使用您的代码检查值(对于每个字段)是否等于特定值。这不是一个真实的例子，您可能想将其更改为某种正则表达式检查，但这应该给您一个很好的起点:

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