Я считаю, что в моем коде есть некоторые ошибки из-за неглубокого слияния, особенно мой флажок, поскольку он ведет себя странно. Может кто-нибудь посоветовать, как это исправить?
Вот как я устанавливаю свое состояние и как обрабатываю изменение ввода:
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>
Удалось получить "Успешно" после отправки, но мой флажок ведет себя странно и остается установленным.
Я считаю, что так и должно быть
const { name, value, checked, type } = e.target;
const isCheckbox = type === "checkbox";
Или
const { name, value, checked } = e.target;
const isCheckbox = name === "rememberMe";
В чем ошибка? Трассировки стека? Вы также можете использовать имя, чтобы проверить, установлен ли он флажок
В приложении нет ошибки, но форма не была отправлена (я получил журнал консоли "Failure")
может быть, нет проверки для флажка, и он отображается как «Ошибка»? какой лучший подход к проверке флажков?
Если это не обязательное поле, вы можете исключить это поле из проверки.
Я изменил код на приведенный выше, и он дал мне "Неудачу" после того, как я отправил