Реагируйте на валидацию формы пользовательского интерфейса материала, используя error и helperText

Question

Я создал форму, в которой я хочу проверить входные данные, и я увидел, что UI материала имеет атрибут с именем error boleean и другой атрибут с именем helperText для 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 не должен быть фиксированным, но должен быть истинным / ложным, основываясь на некоторых вычислениях, которые вы делаете.

Я использовал ваш код для проверки, равняется ли значение (для каждого поля) указанному c ценность. Это не реальный пример, и вы, вероятно, захотите изменить его на какую-то проверку регулярных выражений, но это должно дать вам хорошую отправную точку:

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= / демо. js