Реагируйте: как я могу использовать onSubmit для изменения состояния? - PullRequest
Новая
       41

Реагируйте: как я могу использовать onSubmit для изменения состояния?

0 голосов
/ 25 апреля 2020

Я довольно новичок в React и только что завершил несколько проектов. В настоящее время я пытаюсь создать форму, которая с помощью onSubmit изменяет состояние «isSubmitted» с false на true. Когда «isSubmitted» имеет значение true, я хотел бы отобразить другой компонент, чтобы показать результаты выбора.

В настоящее время происходит то, что onChange работает, и я вижу значение «selectedI», установленное как состояние в console.log, когда я его поменяю. Однако, когда я нажимаю «отправить», это состояние «isSubmitted» не меняется.

Мой код указан ниже. Любая помощь с благодарностью! 

import React, { Component } from "react";
import Results from "../components/Results";

export class Create extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedI: { value: "" },
      //   selectedC: { value: "" },
      //   selectedG: { value: "" },
      //   selectedA: { value: "" },
      isSubmitted: false,
    };
  }

  handleChange = (event) => {
    this.setState({
      selectedI: { value: event.target.value },
    });
  };

  handleSubmit = (event) => {
    event.preventdefault();
    this.setState({
      isSubmitted: true,
    });
  };

  render() {
    console.log(this.state);

    return (
      <>
        <form onSubmit={this.handleSubmit} onChange={this.handleChange}>
          <select value={this.state.value}>
            {this.props.ingredient.map((ingredient) => {
              return (
                <option value={ingredient.strIngredient1}>
                  {ingredient.strIngredient1}
                </option>
              );
            })}
          </select>
          <input type="submit" value="Submit" />
        </form>

        {this.state.isSubmitted && <Results />}
      </>
    );
  }
}

export default Create;

1 Ответ

0 голосов
/ 25 апреля 2020

Внутри вашего handleSubmit метода исправьте регистр на preventdefault. Это должно быть preventDefault. Обратите внимание на заглавную D. После исправления она должна помешать вашей странице перезагружаться и сбрасывать ваше состояние вместе с ней. Смотрите код ниже. 

handleSubmit = (event) => {
    event.preventDefault();
    this.setState({
      isSubmitted: true,
    });
  };
...