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;