javascript - 为什么这个 React CRUD 会回到初始状态?
问题描述
我正在练习反应,我正在做一个简单的crud。我面临的问题是,当我插入一个新元素时,我的应用程序会回到初始状态。我不知道如何解决这个问题。这是代码:
import React, { Component, Fragment } from "react";
import "./App.css";
import Tabela from "./Tabela";
import Form from "./Formulario";
class App extends Component {
state = {
autores: [
{
nome: "Paulo",
livro: "React",
preco: "1000",
},
{
nome: "Daniel",
livro: "Java",
preco: "99",
},
{
nome: "Marcos",
livro: "Design",
preco: "150",
},
{
nome: "Bruno",
livro: "DevOps",
preco: "100",
},
],
};
removeAutor = (index) => {
const { autores } = this.state;
this.setState({
autores: autores.filter((autor, posAtual) => {
return posAtual !== index;
}),
});
};
escutadorDeSubmit = autor => {
this.setState({ autores: [...this.state.autores, autor]})
}
render() {
return (
<Fragment>
<Tabela autores={this.state.autores} removeAutor={this.removeAutor} />
<Form escutadorDeSubmit = {this.escutadorDeSubmit} />
</Fragment>
);
}
}
export default App;
这是另一个类 Formulario.js:
import React, { Component } from 'react';
class Formulario extends Component {
constructor(props) {
super(props);
this.stateInicial = {
nome:'',
livro:'',
preco:''
}
this.state = this.stateInicial;
}
escutadorDeInput = event => {
const { name, value } = event.target;
this.setState({
[name] : value
});
}
submitFormulario = () => {
this.props.escutadorDeSubmit(this.state);
this.setState(this.stateInicial);
}
render() {
const { nome, livro, preco } = this.state;
return (
<form>
<label htmlFor="nome">Nome</label>
<input
id="nome"
type="text"
name="nome"
value={nome}
onChange= {this.escutadorDeInput} />
<label htmlFor="livro">Livro</label>
<input
id="livro"
type="text"
name="livro"
value={livro}
onChange= {this.escutadorDeInput} />
<label htmlFor="preco">Preco</label>
<input
id="preco"
type="text"
name="preco"
value={preco}
onChange= {this.escutadorDeInput} />
<button onClick={this.submitFormulario}>Salvar</button>
</form>
);
}
}
export default Formulario;
当我插入新作者时,应用程序会显示新输入一秒钟,然后重新加载到初始状态。我想保留我刚刚插入的记录,不要丢失它。
解决方案
问题出在表单的提交功能中。由于按钮在表单中,它隐含地获取type="submit"
属性。这意味着,当您单击它时,表单会尝试将其值提交到某个 url,因为它是默认行为。preventDefault()
您可以通过在提交功能中使用来防止这种情况:
submitFormulario = (e) => {
e.preventDefault()
this.props.escutadorDeSubmit(this.state);
this.setState(this.stateInicial);
}
另一种方法是将按钮从表单中取出或显式赋予它type="button"
属性。
推荐阅读
- java - 将 HTML 转换为 -> PDF -> 转换为 MULTIPARTFILE SpringBoot 和 Thymeleaf
- python - 尝试格式化时间和日期时,“模块‘babel’没有属性‘日期’”
- c# - 基于声明的授权
- java - 如何在 ListView 中的项目上显示日期?
- database - 托管环境上的 Cakephp 4 MySQL
- java - 如何获取日期的UTC日期?
- asp.net - ASP.NET 5.0 在另一个程序集上查找控制器
- deployment - jProfiler - 需要通过 UCD 部署 linux 代理
- javascript - Cheerio 数据扩散混乱
- python - 如何使用python获取图像的像素坐标