Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Os valores estão sendo passados vazios. Qual o motivo?

import React, { Component } from "react";
import "./estilo.css";
class FormularioCadastro extends Component {

  constructor(props){
    super(props);
    this.titulo = "";
    this.texto = "";
  }

  _handlerMudancaTitulo(evento){
    evento.stopPropagation();
    this.value = evento.target.value;
  }

  _handlerMudancaTexto(evento){
    evento.stopPropagation();
    this.value = evento.target.value;
  }

  _criarNota(evento){
    evento.preventDefault();
    evento.stopPropagation();
    this.props.criarNotass(this.titulo, this.texto);
  }

  render() {
    return (
      <form className="form-cadastro"
        onSubmit={this._criarNota.bind(this)}
      >
        <input
          type="text"
          placeholder="Título"
          className="form-cadastro_input"
          onChange={this._handlerMudancaTitulo.bind(this)}
        />
        <textarea
          rows={15}
          placeholder="Escreva sua nota..."
          className="form-cadastro_input"
          onChange={this._handlerMudancaTexto.bind(this)}
        />
        <button className="form-cadastro_input form-cadastro_submit">
          Criar Nota
        </button>
      </form>
    );
  }
}

export default FormularioCadastro;
import React, { Component } from "react";
import ListaDeNotas from "./components/ListaDeNotas";
import FormularioCadastro from "./components/FormularioCadastro";
import "./assets/App.css";
import './assets/index.css';
class App extends Component {
  criarNotas(titulo, texto){
    console.log('nota criada' + titulo + " " + texto);
  }

  render() {
    return (
      <section className="conteudo">
        <FormularioCadastro criarNotass={this.criarNotas}/>
        <ListaDeNotas />
      </section>
    );
  }
}

export default App;
3 respostas

olá :) Nos métodos _handlerMudancaTitulo, _handlerMudancaTexto e _criarNota esta faltando evento.preventDefault(); assim ele não recarrega a pagina quando o botão for pressionado e os dados não são perdido.

solução!

Olá, observei que no seu código tanto em _handlerMudancaTitulo, quanto em _handlerMudancaTexto, você passa o this.value = evento.target.value, quando na verdade é preciso passar this.titulo = evento.target.value e this.texto = evento.target.value

Olá, observei que no seu código tanto em _handlerMudancaTitulo, quanto em _handlerMudancaTexto, você passa o this.value = evento.target.value, quando na verdade é preciso passar this.titulo = evento.target.value e this.texto = evento.target.value

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software