我正在尝试创建一个简单的待办事项应用程序来尝试巩固一些概念。 此应用程序从带有 json 对象的 .js 文件中获取一些以前的待办事项。每次单击它们时,它们都会从当前应用程序中删除。
现在我想添加添加待办事项的功能,首先添加到应用程序本身的当前实例,然后添加到文件以确保连续性。
我的问题是添加到应用程序实例。
当将组件与表单一起使用时,一切都会出问题。
我尝试将所有组成部分放入 App.js 主文件中,但结果仍然相同,它在警报(值)行之后刷新。
我还尝试更改 addTodo 函数内的顺序,并且只有当它是函数的第一行时警报才有效,刷新发生在它之前的任何其他地方。所以我认为这与使用应用程序组件的状态有关?
App.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 应该防止这种情况发生?
最佳答案
在 handleSubmit
中执行的第一件事是在事件上调用 preventDefault
方法,它应该可以工作。
handleSubmit(event) {
event.preventDefault()
this.props.addTodo(this.input.value)
}
您还需要在 App
构造函数中将 addTodo
方法绑定(bind)到 this
。
class App extends Component {
constructor() {
super()
this.state = {
todos: todosData
}
this.handleChange = this.handleChange.bind(this)
this.addTodo = this.addTodo.bind(this)
}
// ...
}
关于javascript - ReactJS中带有表单的组件不断刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54638203/