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>
);
}
}