Установить состояние, не устанавливая состояние

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

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" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
47
3

Ответы 3

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>
  );
}

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