0

Boa noite, sou novo em React, venho da programação Java/C# e estou com bastante dificuldade em entender coisas que talves sejam simples em React js. Minha questão é o seguinte, preciso atualizar uma lista contida no meu componente pai Employee através do meu componente filho Form quando clico no botão salvar, no qual este executa a função save() atualizando o estado do filho. Esta mesma lista do pai irei usar no componente Table. Segue o código:

COMPONENTE PAI

import React from "react";
import Main from "../templates/Main";
import Form from "./Form";
import Table from "./Table";

const headerProps = {
  title: "Employés",
  subtitle:
    "Inscription des employés: Inclusion, Listage, Édition, Suppression",
};

const employeeProps = {
  employeesList: [
    {
      lastName: "Pierini",
      name: "Alex",
      birthday: "1985-08-28",
      title: "Programmeur",
    },
    {
      lastName: "Ferreira",
      name: "Pedro",
      birthday: "1988-05-07",
      title: "Vendeur",
    },
    {
      lastName: "Pelela",
      name: "Tiago",
      birthday: "1982-03-14",
      title: "Infographiste",
    },
  ],
};

export default class Employee extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ...employeeProps };
  }

  addEmployee(employeesList) {
    console.log("Ajoutée");

    this.setState({ employeesList: employeesList });
  }

  editEmployee() {
    console.log("Modifier");
  }

  deleteEmployee() {
    console.log("Supprimer");
  }

  render() {
    return (
      <Main {...headerProps}>
        <Form {...employeeProps} callbackParent={(employeesList) => this.addEmployee(employeesList)} />
        <Table
          {...employeeProps}
          editEmployee={() => this.editEmployee()}
          deleteEmployee={() => this.deleteEmployee()}
        />
      </Main>
    );
  }
}

COMPONENTE FILHO

import React from "react";
import Button from "../Button";

const initialState = {
  employee: {
    lastName: "",
    name: "",
    birthday: "",
    title: "",
  },
};

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ...initialState, ...props };
  }

  handleInputChange(event) {
    const employee = { ...this.state.employee };
    employee[event.target.name] = event.target.value;
    this.setState({ employee });
  }

  save() {          
    this.setState(
      function (state) {
        return {
          employeesList: [...state.employeesList, { ...state.employee }],
          employee: initialState.employee,
        };
      },
      (state) => this.props.callbackParent && this.props.callbackParent(state)
    );
  }

  clear() {
    this.setState({ employee: initialState.employee });
  }

  render() {    
    return (
      <div>
        <form>
          <label>Nom</label> <br />
          <input
            type="text"
            name="lastName"
            value={this.state.employee.lastName}
            onChange={(event) => this.handleInputChange(event)}
          />
          <br />
          <label>Prénom</label> <br />
          <input
            type="text"
            name="name"
            value={this.state.employee.name}
            onChange={(event) => this.handleInputChange(event)}
          />
          <br />
          <label>Date de Naissance</label> <br />
          <input
            type="date"
            name="birthday"
            value={this.state.employee.birthday}
            onChange={(event) => this.handleInputChange(event)}
          />
          <br />
          <label>Titre</label> <br />
          <select
            name="title"
            value={this.state.employee.title}
            onChange={(event) => this.handleInputChange(event)}
          >
            <option value="DEFAULT"></option>
            <option value="Infographiste">Infographiste</option>
            <option value="Programmeur">Programmeur</option>
            <option value="Vendeur">Vendeur</option>
          </select>
          <br />
        </form>
        <Button
          handleClick={() => this.save()}
          // handleClick={this.props.callbackParent({ ...this.state.employee })}
          label="Enregistrer"
        />
        <Button handleClick={() => this.clear()} label="Annuler" />
        <hr />
      </div>
    );
  }
}
1
  • não deu certo o exemplo passado?
    – novic
    Commented 22/09/2020 às 0:01

2 Respostas 2

1

O código está tão confuso e a ideia é muito simples de implementar que é melhor eu desenvolver um exemplo mínimo do que arrumar o seu, quando se trabalha com estados dessa forma onde componentes precisam compartilhar eu vou direto para Context ou Redux como nesse exemplo criado por mim, mas, o seu código parece fazer muitas coisas sem necessidade, se você quer alterar o estado do componente pai precisa passar uma função desse componente pai para alterar, no caso em questão ao momento da digitação já é alterado o estado pela função onChangeItem, sendo um exemplo bem básico:

class Pai extends React.Component {
  constructor() {
    super();
    this.state = { 
      list: [
        {id: 1, name: 'item 1'},
        {id: 2, name: 'item 2'},
      ]
    };
    this.onChangeItem =
      this.onChangeItem.bind(this);
  }
  onChangeItem (item) {
    const newList = this.state.list.map(e => {
      if (e.id === item.id) return item;
      return e;
    });
    this.setState({list: newList});
  }
  render() {
    return (
      <div>
        <Filho list={this.state.list} onChangeItem={this.onChangeItem} />
      <div>{JSON.stringify(this.state.list)}</div>  
      </div>
    )
  }
};

class Filho extends React.Component {
  constructor(props){
    super(props);    
  }
  render() {
    const list = this.props.list;
    const onChangeItem = this.props.onChangeItem;
    return (
      <div>
        <ul>
          {list.map((l,i) => (
            <li>
              <input value={l.name} 
                onChange={e => onChangeItem({id: l.id, name:e.target.value})} /></li>
          ))}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<Pai/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

2
  • Como eu te disse, sou novato em React e venho de um outro paradigma de programação, o q me dificulta ainda mais aprender o React. O que me levou mais tempo para estudar sua resposta, tentar entender e aplicar em meu código. Acredito q isso não seja motivo para vc negativar minha pergunta, certo? Ou é comum negativar quem demora um pouco mais a entender uma respostar? Commented 23/09/2020 às 13:28
  • @AlexForastierPierini primeiramente eu não negativei a sua pergunta essa afirmação é sem precedentes, o que eu percebo é que na rede tem alguém a todo momento em perguntas de javascript negativando, mas, essa pessoa não sou eu.
    – novic
    Commented 23/09/2020 às 15:06
0

Após muito estudo consegui enteder essa logica de passar funções p/ os eventos dos componentes filhos. Segue a resposta, espero que ajude algume que passou pela mesma dificuldade do que eu quando começou à aprender React.

Componente Pai

import React, { useState } from "react";
import Main from "../templates/Main";
import Form from "./Form";
import Table from "./Table";

const headerProps = {
  title: "Employés",
  subtitle:
    "Inscription des employés: Inclusion, Listage, Édition, Suppression",
};

const initialState = {
  employe: {
    lastName: "",
    name: "",
    birthday: "",
    title: "",
  },
  employesList: [],
};

export default (props) => {
  const [employe, setEmploye] = useState(initialState.employe);
  const [employesList, setEmployesList] = useState(initialState.employesList);
  const [employeChange, setEmployeChange] = useState(null);

  function handleInputChange(event) {
    setEmploye({ ...employe, [event.target.name]: event.target.value });
  }

  function saveEmploye() {
    const newList = employesList.concat(employe);
    setEmployesList(newList);
    setEmployeChange(null);
    setEmploye(initialState.employe);
  }

  function clearFormFields() {
    if (employeChange !== null) {
      const refreshList = employesList.concat(employeChange);
      setEmployesList(refreshList);
      setEmployeChange(null);
    }
    setEmploye(initialState.employe);
  }

  function editEmploye(lastName, name) {
    const employeToModify = employesList.filter(
      (employe) => employe.lastName === lastName && employe.name === name
    );
    setEmploye(employeToModify[0]);
    setEmployeChange(employeToModify[0]);
    deleteEmploye(lastName, name);
  }

  function deleteEmploye(lastName, name) {
    const newList = employesList.filter(
      (employe) => employe.lastName !== lastName && employe.name !== name
    );
    setEmployesList(newList);
  }

  return (
    <Main {...headerProps}>
      <Form
        employe={employe}
        onInputChange={handleInputChange}
        onSaveEmploye={saveEmploye}
        onClearFormFields={clearFormFields}
      />
      <Table
        employesList={employesList}
        onEditEmploye={editEmploye}
        onDeleteEmploye={deleteEmploye}
      />
    </Main>
  );
};

Componente Filho

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import SaveIcon from "@material-ui/icons/Save";
import ClearIcon from "@material-ui/icons/Clear";

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

export default (props) => {
  const classes = useStyles();

  return (
    <div>
      <form>
        <label>Nom</label> <br />
        <input
          type="text"
          name="lastName"
          value={props.employe.lastName}
          onChange={props.onInputChange}
          required
        />
        <br />
        <label>Prénom</label> <br />
        <input
          type="text"
          name="name"
          value={props.employe.name}
          onChange={props.onInputChange}
        />
        <br />
        <label>Date de Naissance</label> <br />
        <input
          type="date"
          name="birthday"
          value={props.employe.birthday}
          onChange={props.onInputChange}
        />
        <br />
        <label>Titre</label> <br />
        <select
          name="title"
          value={props.employe.title}
          onChange={props.onInputChange}
        >
          <option value="DEFAULT"></option>
          <option value="Infographiste">Infographiste</option>
          <option value="Programmeur">Programmeur</option>
          <option value="Vendeur">Vendeur</option>
        </select>
        <br />
      </form>
      <Button
        id="saveEmployeButton"
        variant="contained"
        size="small"
        startIcon={<SaveIcon />}
        className={classes.button}
        onClick={props.onSaveEmploye}
      >
        Enregistrer
      </Button>
      <Button
        id="clearFormFieldsButton"
        variant="contained"
        size="small"
        startIcon={<ClearIcon />}
        className={classes.button}
        onClick={props.onClearFormFields}
      >
        Annuler
      </Button>
      <hr />
    </div>
  );
};
2
  • Você pode adicionar uma resposta na sua pergunta isso é válido, inclusive bom, mas, a sua citação é preocupante se você casou outro problema não deve ser a resposta da sua pergunta, aqui os problemas nós adicionamos na pergunta e por fim aceitamos uma resposta se assim quiser.
    – novic
    Commented 23/09/2020 às 15:12
  • Então, no caso eu aceitei sua resposta como solução, pq consegui de fato solucionar qdo entendi esta questão do callback, mas acredito que esse outro bug seja devido a ter 2 callbacks, um no componente Form e outro para o componente Table. No caso então, para esse novo problema eu devia cirar uma nova pergunta além desta? Commented 24/09/2020 às 0:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .