帶表單的組件在 ReactJS 中不斷刷新頁面

Question

我正在嘗試創建一個簡單的待辦事項應用程序來鞏固一些概念。 這個應用程序從帶有 json 對象的 .js 文件中獲取一些以前的待辦事項。 每次點擊它們時，它們都會從當前應用程序中刪除。

現在我想添加添加待辦事項的功能，首先添加到應用程序本身的當前實例，然后添加到文件以確保連續性。

我的問題出現在添加到應用程序實例中。

當將組件與表單一起使用時，一切都會向南。

我嘗試將所有組件部分放在 App.js 主文件中，但結果仍然相同，它在 alert(value) 行之后刷新。

我還嘗試更改 addTodo 函數內的順序，並且警報僅在它是該函數的第一行時才有效，而刷新發生在它之前的任何其他地方。 所以我認為這是關於使用應用程序組件的狀態？

應用程序.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import todosData from "./todosData"
import TodoItem from "./TodoItem"
import TodoForm from './TodoForm'
class App extends Component {

    constructor() {
        super()
        this.state = {
            todos: todosData
        }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(id) {
        const allTodos = this.state.todos
        const filtered = allTodos.filter(x => x.id !== id)
        const filtered2 = filtered
        filtered2.push({id:4,text:"HAKUNA MATATA",completed:false   })
        this.setState({todos:filtered2})
        //added testing so that whenever I delete a todo it adds one with "HAKUNA MATATA"
  }

    addTodo(value) {
        alert(value)
        const allTodos = this.state.todos
        const lastTodo = this.state.todos.slice(-1)[0]
        const newId = lastTodo.id + 1
        const newTodo = {id: newId, text: value, completed:false}
        allTodos.push(newTodo)
        this.setState({todos:allTodos})
    }

  render() {
    const todoItems = this.state.todos.map( item =>
      <TodoItem
        key={item.id}
        item={item}
        handleChange={this.handleChange}
      />
    )
        const text = ""
    return (
      <div className="todo-list">
        {todoItems}
                <TodoForm addTodo={this.addTodo}/>
      </div>
        );
  }
}

export default App;

TodoForm.js

import React from 'react'

class TodoForm extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(event) {
    this.props.addTodo(this.input.value)
    event.preventDefault() 
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
        </label>
          <input type="text" ref={(input) => this.input = input}/>

      </form>
    )
  }
}

export default TodoForm

你們能幫我解決這個問題嗎？ 據我了解， preventDefault 應該防止這種情況？

Answer 1

您在handleSubmit執行的第一件事就是在事件上調用preventDefault方法，它應該可以工作。

handleSubmit(event) {
  event.preventDefault() 
  this.props.addTodo(this.input.value)
}

您還需要在App構造函數addTodo方法綁定到this 。

class App extends Component {
  constructor() {
    super()
    this.state = {
      todos: todosData
    }
    this.handleChange = this.handleChange.bind(this)
    this.addTodo = this.addTodo.bind(this)
  }

  // ...
}

Answer 2

萬一有人從谷歌得到這個答案：在我的情況下，當我提交表單時，我延遲加載了下面的一個組件，但它沒有被包裹在<Suspense> 。 添加它解決了我的問題。