У меня есть очень простой компонент с одним состоянием, я инициализирую состояние при создании компонента и пытаюсь изменить его при отправке формы. Это не работает по какой-то причине.
import React, { Component } from "react";
export default class AddTodo extends Component {
constructor() {
super();
this.state = {
submited: false
};
}
handleSubmit = event => {
this.setState = {
submited: true
};
alert("Submited state: " + this.state.submited);
event.preventDefault();
};
render() {
return (
<div className = "container mt-3">
<form onSubmit = {this.handleSubmit}>
<div className = "input-group mb-3">
<input
type = "text"
className = "form-control"
placeholder = "New Todo Description Here"
/>
<div className = "input-group-append">
<button className = "btn btn-primary" type = "submit">
Add Todo
</button>
</div>
</div>
</form>
</div>
);
}
}





import React, { Component } from "react";
export default class AddTodo extends Component {
constructor() {
super();
this.state = {
submited: false
};
}
handleSubmit = event => {
this.setState({
submited: true
},()=>{
alert("Submited state: " + this.state.submited);
event.preventDefault();
});
};
render() {
return (
<div className = "container mt-3">
<form onSubmit = {this.handleSubmit}>
<div className = "input-group mb-3">
<input
type = "text"
className = "form-control"
placeholder = "New Todo Description Here"
/>
<div className = "input-group-append">
<button className = "btn btn-primary" type = "submit">
Add Todo
</button>
</div>
</div>
</form>
</div>
);
}
}
this.setState — это функция, поэтому назовите ее как функцию, используя скобки ().
this.setState({
submited: true
});
Как видите, здесьsetState — это функция, но вы присваиваете ей значение.
Проблема здесь:
this.setState = {
submited: true
};
Так должно быть:
this.setState({submitted: true}); // Mind the typo also
Для краткости: команда React опубликовала хуки реакции в версии 16.8 в качестве замены компонентов класса, которые имеют некоторые недостатки. Я бы попробовал, документы здесь.
С хуками ваш код будет выглядеть так:
import React, { useState } from 'react';
function AddTodo() {
// Declare a new state variable, which we'll call "count"
const [isSubmitted, setSubmission] = useState(false);
function handleSubmit(event) {
setSubmission(true);
event.preventDefault();
}
return (
<div className = "container mt-3">
<form onSubmit = {handleSubmit}>
<div className = "input-group mb-3">
<input
type = "text"
className = "form-control"
placeholder = "New Todo Description Here"
/>
<div className = "input-group-append">
<button className = "btn btn-primary" type = "submit">
Add Todo
</button>
</div>
</div>
</form>
);
}