Question

我正在练习反应，并且正在研究一个简单的任务。我面临的问题是，当我插入一个新元素时，我的应用程序将返回到初始状态。我不确定如何解决此问题。这是代码：

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;

当我插入新作者时，该应用将显示新输入一秒钟，然后重新加载到初始状态。我想保留刚刚插入的记录，而不会丢失。

Answer 1

问题出在表单的提交功能中。当按钮处于表单形式时，它隐式地获得type="submit"属性。这意味着，当您单击它时，表单会尝试将其值提交到某些url，因为它是其默认行为。您可以通过在提交功能中使用preventDefault()来防止这种情况：

submitFormulario = (e) => {
    e.preventDefault()
    this.props.escutadorDeSubmit(this.state);
    this.setState(this.stateInicial);
}

另一种选择是将按钮从表单中移出或将其明确赋予type="button"属性。

为什么此React CRUD返回初始状态？

1 个答案: