React：如何使用 onSubmit 更改 state？

Question

我对 React 很陌生，只用它完成了几个项目。 我目前正在尝试创建一个表单，使用 onSubmit 将“isSubmitted”的 state 从 false 更改为 true。 当“isSubmitted”为真时，我想渲染另一个组件来显示选择的结果。

当前发生的是 onChange 正在工作，当我更改它时，我可以在 console.log 中看到“selectedI”的值设置为 state。 但是，当我单击提交时，“isSubmitted”的这个 state 不会改变。

我的代码如下。 任何帮助是极大的赞赏！

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;

Answer 1

在您的handleSubmit方法中更正preventdefault的大小写。 它应该是preventDefault 。 注意大写 D。一旦更正，它应该会阻止您的页面重新加载和重置您的 state。 请参阅下面的代码。

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