Как обрабатывать ошибки в моих полях формы с помощью одной функции в ReactJS?

Question

У меня есть форма, в которой пользователю нужно ответить на 3 вопроса, чтобы иметь возможность зарегистрировать новый пароль. Все поля являются обязательными, и пользователь не может отправить данные на сервер, пока не будет дан ответ на 3 вопроса.

Мой вопрос: как обрабатывать ошибки поля ввода с помощью только одной функции? В настоящее время я выполняю функцию для каждого из полей. И это не очень хорошо на уровне производительности.

Например, с помощью всего одной функции я могу получить значения, введенные во все поля ввода:

         const handleChangeField = (field) => (event) => {
  const value = event?.target?.value || "";
  setData((prev) => ({ ...prev, [field]: value }));
};

Подскажите, можно ли создать функцию, аналогичную приведенной выше, но для обработки ошибок? В данный момент я делаю вот что:

         <TextField
  label="What is your mother's name?"
  className={classes.input}
  error={hasErrorMother}
  helperText={hasErrorMother ? "Required field*" : ""}
  value={data.motherName}
  onInput={(event) =>
    event.target.value.length > 0
      ? setHasErrorMother(false)
      : setHasErrorMother(true)
  }
  onChange={handleChangeField("motherName")}
/>

Я обрабатываю ошибки для каждого поля в onInput.

Вот код, который я поместил в codeandbox

Заранее большое спасибо.

Answer 1

Вот идея: вы продолжаете использовать handleChangeField но с некоторыми модификациями для обработки errorтакже. Но сначала нам нужно изменить бит заголовка состояния:

// Remove those
// const [hasErrorMother, setHasErrorMother] = useState(false);
// const [hasErrorBorn, setHhasErrorBorn] = useState(false);
// const [hasErrorPet, setHasErrorPet] = useState(false);

// Instead have the error state this way
const [error, setError] = useState({
  motherName: false,
  birthplace: false,
  petName: false
});

...
// handleChangeField will have an extra line for error handling
const handleChangeField = (field) => (event) => {
  const value = event?.target?.value || "";
  setData((prev) => ({ ...prev, [field]: value }));
  setError((prev) => ({ ...prev, [field]: value.length === 0 })); // THIS ONE
};

И в операторе возврата TextField изменится на:

// onInput is removed, because onChange is taking care of the error
<TextField
  label="What is your mother's name?"
  className={classes.input}
  error={error.motherName}
  helperText={error.motherName? "Required field*" : ""}
  value={data.motherName}
  onChange={handleChangeField("motherName")}
/>

Теперь о handleContinueAction, это также изменится следующим образом:

...
const handleContinueAction = () => {
  const isValid =
    data.motherName.length > 0 &&
    data.birthplace.length > 0 &&
    data.petName.length > 0;

  if (isValid) {
    console.log("Ok, All data is valid, I can send this to the server now");
  } else {
    // If you want to show error for the incomplete fields
    setError({
      motherName: data.motherName.length === 0,
      birthplace: data.birthplace.length === 0,
      petName: data.petName.length === 0
    })
  }
};

...
// and git rid of this part
// const validateFields = (body) => {
//   if (body.motherName.length === 0) {
//     return setHasErrorMother(true);
//   }

//   if (body.birthplace.length === 0) {
//     return setHhasErrorBorn(true);
//   }

//   if (body.petName.length === 0) {
//     return setHasErrorPet(true);
//   }

//   return true;
};