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

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

React: how do I use onSubmit to change state?

reactjs

forms

state

onsubmit