Блог

Главная - Вопросы по программированию - Измененное значение текстового поля не обновляется в onSubmit — React-Hook-Form

Измененное значение текстового поля не обновляется в onSubmit — React-Hook-Form

#reactjs #react-hooks #material-ui #react-hook-form #react-material

Вопрос:

Я новичок в том, чтобы реагировать. Я сталкиваюсь с проблемой, когда пытаюсь обработать отправку формы.

Кто знает этот ответ, пожалуйста, дайте мне знать, используя React Material-UI, React-Hook-Форму С контроллером.

В моей программе есть 3 текстовых поля. Расчет: Время ожидания=фактическое время-рабочее время; фактическое время-значение по умолчанию (значение равно 5). Пока я изменяю значение текстового поля «Рабочее время», время ожидания автоматически обновляет значение времени ожидания. Я добавил событие onChange в текстовое поле рабочего времени. В событии onSubmit мне нужно получить значение фактического времени, значение рабочего времени и значение времени ожидания. Но я не смог получить значение на Submit.

Я написал свой код в CodeSandbox. Значение TextFieldChange React-hook-формы не вызывается в событии onSubmit

скриншот: TextFieldChangeUpdate

Ответ №1:

Чтобы ответить на ваш вопрос, причина, по которой вы не отправляете форму, заключается в том, что вы не привязываете компонент кнопки к входу, добавьте эту опору в свой компонент, и вы сможете отправить форму

 <Button variant="contained" type="submit">Submit</Button>

тип=»отправить» должен позволять отправлять форму.

Теперь, когда вы знаете ответ, вы не используете реагировать крюк форме правильно, вы не должны смешиваться реагировать.useState с реагировать-крюк-формы с момента ее теряет цель, пожалуйста, прочитайте документацию о том, как использовать зарегистрировать крюк с входами и если вам нужно обновить одно из входных значений, просто смотреть за вход изменений и вы будете читать в ходу.

Кроме того, вы получаете предупреждение, потому что у вас есть форма, вложенная в форму, поэтому вместо использования поля в качестве формы измените его на div или что-то еще, что является допустимым вложением html:

   <Box
    component="div"
    sx={{
      "amp; > :not(style)": { m: 1, width: "25ch" }
    }}
  >

Вот рабочая песочница со всеми функциями, которые вы хотите выполнить:
Рабочая песочница

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

Ответ №2:

Полностью удалите свой form тег и поместите обработчик onSubmit внутри компонента Box. Видите ли, вы назначили его компоненту form , что означает, что внутри вашей формы есть вложенная форма. кнопка «Отправить» находится внутри вложенной формы и onClick не вызывает onSubmit функцию внутри внешней формы. Некоторые компоненты пользовательского интерфейса материала принимают component атрибут, и он создает HTML-тег с указанным значением.

 return (
    <Box
      onSubmit={handleSubmit(onSubmit)}
      component="form"
      sx={{
        "amp; > :not(style)": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
        // ...
    </Box>
);

Пример кода и ящика

Метки: