Почему моя форма React автоматически обновляет sh страницу, даже если я помещаю «event.preventDefault ()» в handleSubmit?

Question

У меня есть два файла, которые работают вместе для рендеринга. Первый - это приложение. js, которое сначала отображает форму. js. Затем форма будет собирать информацию, которая при отправке изменяет состояние формы и вызывает функцию из приложения. js. Эта функция называется createProject. Вызов createProject в Form. js handleSubmit заставляет страницу автоматически обновлять sh. Однако, если я удалю createProject из handleSubmit, страница не будет обновляться автоматически sh. Вот два файла.

import React, { Component } from "react";
import Project from "./components/Project.js"
import Form from "./Form.js";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projectList: [],
            myProjects: [],
            userList: [],
            submitted: false
        };

        this.createProject = this.createProject.bind(this);
    }

    createProject(title, desc, langs, len, exp) {
        this.setState({
            projectList: this.state.projectList.push([
                {
                    title : title,
                    description : desc,
                    language : langs,
                    length : len,
                    experience : exp
                }
            ]),
            submitted : true
        });
    }

    deleteProject(title) {
        const projects = this.state.projectList.filter(
            p => p.title !== title 
        );
        this.setState({projects});
    }

    render() {
        let info;
        if (this.state.submitted) {
            info = (
                <div>
                  <p>cccc</p>
                </div>
            );
        } else {
            info = (
                <br/>
            );
        }
        return(
            <div>
                <Form/>
                {info}
                {this.state.projectList.map((params) =>
                <Project {...params}/>)}
            </div>
        );
    }

    
}

export default App;

import React from "react";
import createProject from "./App.js"

class Form extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        title: "",
        description: "",
        language: "",
        length: 0,
        experience: "",
        submitted: false
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleSubmit(event) {

      this.setState({
        submitted: true
      })
      createProject(
        this.state.title, 
        this.state.description,
        this.state.language,
        this.state.length,
        this.state.experience
      )
      event.preventDefault();
    }
  
    handleInputChange(event) {
      const target = event.target;
      const value = target.value;
      const name = target.name;
  
      this.setState({
        [name]: value
      });
    }
  
    render() {
      let info;
      if (this.state.submitted) {
        info = (
          <div>
            <h1>{this.state.title}</h1>
            <p>{this.state.description}</p>
            <p>{this.state.language}</p>
            <p>{this.state.length}</p>
            <p>{this.state.experience}</p>
           </div>
        );
      } else {
          info = <br/>;
      }
      return (
        <div>
            <form onSubmit={this.handleSubmit}>
            <label>
                Title:
                <input
                name="title"
                type="textbox"
                checked={this.state.title}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <label>
                Description:
                <input
                name="description"
                type="textbox"
                checked={this.state.description}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <label>
                Language:
                <input
                name="language"
                type="textbox"
                checked={this.state.language}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <label>
                Length:
                <input
                name="length"
                type="number"
                checked={this.state.length}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <label>
                Experience:
                <input
                name="experience"
                type="textbox"
                checked={this.state.experience}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <input type="submit" value="Submit" />
            </form>
          {info}
        </div>
      );
    }
  }

export default Form;

Я также пробовал добавить «новый» в «createProject» в handleSubmit, и хотя это останавливает автоматическое обновление sh, оно не вызывает createProject функцию. (Или, может быть, это так, но, похоже, ни один из кодов функции createProject не запущен.) Может ли кто-нибудь помочь предотвратить это автоматическое обновление sh, а также разрешить правильную работу функции createProject приложения?

Answer 1

Страница обновляется автоматически, потому что выполнение никогда не доходит до вашей строки event.PreventDefault(). Это происходит из-за ошибки, возникающей при попытке реакции вычислить createProject. Чтобы исправить это, исправьте handleSubmit вот так.

handleSubmit(event) {

  event.preventDefault(); // moved up in execution.

  this.setState({
    submitted: true
  })
  createProject(
    this.state.title, 
    this.state.description,
    this.state.language,
    this.state.length,
    this.state.experience
  )
}

Обратите внимание, что перемещение event.PreventDefault() в начало вашей функции handleSubmit(event) непосредственно перед строкой this.setState предотвращает поведение формы по умолчанию при отправке.

Однако вы получаете сообщение об ошибке, потому что App. js не экспортирует функцию с именем createProject. Чтобы сохранить createProject в экземпляре App, вам необходимо передать его как prop, на который затем вы можете ссылаться как this.props.createProject.

См. этот ответ о том, как вызвать родительский метод в ReactJS.