daily pastebin goal
53%
SHARE
TWEET

Untitled

a guest Mar 20th, 2019 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4.  
  5.  
  6.  
  7.  
  8. class EdicaoTexto extends Component{
  9.  
  10. //
  11.  
  12.  
  13.   render() {
  14.     return(
  15.  
  16.  
  17.       <input item={this.props.item} value={this.props.valor} type="text" name={this.props.nome} />
  18.   );
  19.   }
  20. }
  21.  
  22. class CampoTexto extends Component{
  23.  
  24. //
  25.  
  26.  
  27.   render() {
  28.     return(
  29.       //sintaxe mais simples para declarar uma função
  30. /*
  31.       var funcao1 = function(parametro1) {
  32.         return parametro1 + 1;
  33.       }
  34.       var funcao1 = (parametro1) => parametro1 + 1;*/
  35.  
  36.       <input onChange={(e) => this.props.onChangeDeTexto(e.target,this.props.nome)} type="text" name={this.props.nome} />
  37.   );
  38.   }
  39. }
  40.  
  41.  
  42. class Salvar extends Component{
  43.  
  44.  
  45.  
  46.   render() {
  47.     return(
  48.       <button onClick={this.salva} name={this.props.nome} value="Salvar">Salvar</button>
  49.  
  50.   );
  51.   }
  52. }
  53.  
  54. class FormularioAdd extends Component{
  55.  
  56.  
  57.  
  58.   render() {
  59.     return(
  60.       <form onSubmit={this.props.acao}>
  61.       <CampoTexto onChangeDeTexto ={this.props.onChangeDeTexto} nome="NovaTarefa" />
  62.       <Salvar nome="salvarNovaTarefa" />
  63.       </form>
  64.  
  65.     );
  66.  
  67.  
  68.   }
  69. }
  70.  
  71. class ListaDeTarefas extends Component{
  72.  
  73.  
  74.     render(){
  75.       return(
  76.       <div className="Lista">
  77.         <ul>
  78.           {this.props.tarefas.map((x,key)=> {
  79.               var editor = null;
  80.               if (this.props.edita == key)
  81.                 editor = (<EdicaoTexto item={key} valor={x} />);
  82.               return (
  83.                 <li>
  84.                     <a onClick={this.props.listClickHandler}>{x}</a>
  85.                     {editor}
  86.                 </li>
  87.               );
  88.           })
  89.           }
  90.         </ul>
  91.         </div>
  92.     );
  93.  
  94.  
  95.   }
  96. }
  97.  
  98.  
  99. class App extends Component {
  100.  
  101.  
  102.   edicao(chave)
  103.   {
  104.     console.log('teste',chave);
  105.   }
  106.  
  107.   stateCampo(evento,nomeDoCampo)
  108.   {
  109.     console.log(nomeDoCampo);
  110.     let campos = {};
  111.     campos[nomeDoCampo] = evento.value;
  112.     this.setState(campos);
  113.   }
  114.  
  115.   salva(evento){
  116.     evento.preventDefault();
  117.     console.log(this.state)
  118.     this.setState({
  119.       ListaDeItens: this.state.ListaDeItens.concat(this.state.NovaTarefa)
  120.     });
  121.  
  122.  
  123.   }
  124.  
  125.  
  126.   constructor(props){
  127.     super(props)
  128.     this.state={
  129.       ListaDeItens:['criar mockup','adicionar submit','atualizar lista','inserir API JSON'],
  130.       edita:null,
  131.     }
  132.   }
  133.  
  134.  
  135.   render() {
  136.     console.log(this.state)
  137.     return (
  138.       <div className="App">
  139.         <FormularioAdd onChangeDeTexto={(e,nomeDoCampo) => this.stateCampo(e,nomeDoCampo)} acao={(e) => this.salva(e)}/>
  140.         <ListaDeTarefas listClickHandler={(e,key) => this.edicao(e,key)} edita={this.state.edita}tarefas={this.state.ListaDeItens}/>
  141.       </div>
  142.     );
  143.   }
  144. }
  145.  
  146. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top