Реагировать - ввод флажка не обновляется правильно (из-за неглубокого слияния)

Я считаю, что в моем коде есть некоторые ошибки из-за неглубокого слияния, особенно мой флажок, поскольку он ведет себя странно. Может кто-нибудь посоветовать, как это исправить?

Вот как я устанавливаю свое состояние и как обрабатываю изменение ввода:

state = {
  form: {
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    rememberMe: false
  }
};

  handleChangeEvent = e => {
    const { name, value, checked } = e.target;
    const isCheckbox = checked === "checkbox";
    this.setState(prevState => ({
      form: {
        // all other key value pairs of form object
        ...prevState.form,

        // update this one specifically
        [name]: isCheckbox ? checked : value
      }
    }));
  };

Отправка и проверка

  validateForm = () => {
    const formInputs = ["firstName", "lastName", "email", "password", "rememberMe"];

    for (let i = 0; i < formInputs.length; i++) {
      const inputName = formInputs[i];

      if (!this.state.form[inputName].length) {
        return false;
      }
    }

    return true;
  };

  handleSubmit = () => {
    if (this.validateForm()) {
      console.info("Success!");
      console.info(this.state);
    } else {
      console.info("Failure!");
    }
  };

Вот фрагмент моей формы:

   <form
      className = "Form"
      onSubmit = {e => {
        e.preventDefault();
        this.handleSubmit();
      }}
    >
      <input name = "firstName" onChange = {this.handleChangeEvent} />
      <input name = "lastName" onChange = {this.handleChangeEvent} />
      <input name = "email" onChange = {this.handleChangeEvent} />
      <input name = "password" onChange = {this.handleChangeEvent} />
      <input
        name = "rememberMe"
        type = "checkbox"
        checked = {this.state.form.rememberMe}
        onChange = {this.handleChangeEvent}
      />
      <button className = "no-padding">Submit</button>
    </form>

Удалось получить "Успешно" после отправки, но мой флажок ведет себя странно и остается установленным.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
29
1

Ответы 1

Я считаю, что так и должно быть

 const { name, value, checked, type } = e.target;
 const isCheckbox = type === "checkbox";

Или

 const { name, value, checked } = e.target;
     const isCheckbox = name === "rememberMe";

Я изменил код на приведенный выше, и он дал мне "Неудачу" после того, как я отправил

rory-h 19.12.2018 00:36

В чем ошибка? Трассировки стека? Вы также можете использовать имя, чтобы проверить, установлен ли он флажок

agenthunt 19.12.2018 00:40

В приложении нет ошибки, но форма не была отправлена ​​(я получил журнал консоли "Failure")

rory-h 19.12.2018 00:46

может быть, нет проверки для флажка, и он отображается как «Ошибка»? какой лучший подход к проверке флажков?

rory-h 19.12.2018 01:24

Если это не обязательное поле, вы можете исключить это поле из проверки.

agenthunt 19.12.2018 01:29

Другие вопросы по теме