React：如何使用onSubmit来改变状态？

Question

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

目前发生的情况是，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;

Answer 1

在你的 handleSubmit 矫正法 preventdefault. 应该是 preventDefault. 注意大写的D.一旦纠正，它应该停止你的页面重新加载和重置你的状态一起。请看下面的代码。

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