J'ai une application de gestion des employés réagissant. Actuellement, j'ai toutes les actions crud travaillant, à l'exception de l'employé de la modification. Lorsque vous cliquez sur le bouton Modifier, vous êtes dirigé vers un écran Modifier le formulaire et peut saisir toutes les options de saisie et soumettre le formulaire d'édition. Dans la forme d'édition, tous les champs d'entrée apparaissent dans l'état, mais lorsqu'ils sont soumis, rien n'est mis à jour. https://github.com/paperplanes1623/react-employesponses
app.js < / p> éditionForm.js main.js Résultats attendus: Formulaire met à jour les employés d'origine avec de nouvelles valeurs d'entrée
Résultats réels: la forme soumet et redirige vers la page principale, mais rien ne se passe.
3 Réponses :
Il y a une erreur de frappe de frappe dans votre fonction pas doit être poignées fonction. this.props.edit effectue uniquement la fonction basculante, non pas à la mise à jour.
Merci. Juste fixé la faute de frappe. Le résultat est toujours le même. Les valeurs apparaissent en état mais lors de la soumission de formulaire, rien ne se passe.
Pourriez-vous voir le résultat mis à jour dans le composant employé?
Non. Le composant d'employé affiche simplement l'employé sur la page principale. Après avoir soumis EdiDIdForm, je suis redirigé vers la page principale, mais l'État affiche toujours les employés originaux.
C'est parce que vous utilisez la fonction e.preventDefault (). Cette fonction vous a cessé de rediriger vers la page principale.
Je pense que le problème est-ce, Vous enveloppez votre entrée code> avec Vous ne devez avoir que, P> lien code>, donc chaque fois que vous cliquez dessus Naviguez jusqu'au chemin / code> et n'exécutez pas votre poignées à poignées code> fonction. p> import React, { Component } from 'react';
import { Form, Divider } from 'semantic-ui-react';
class EmployeeForm extends Component {
state = {
id: this.props.updatedEmployee.id,
firstName: this.props.updatedEmployee.firstName,
lastName: this.props.updatedEmployee.lastName,
email: this.props.updatedEmployee.email,
phone: this.props.updatedEmployee.phone
}
handleChange = (e) => {
const { name, value } = e.target
this.setState({ [name]: value })
}
handleSubmit = (e) => {
e.preventDefault();
//call add function
if (this.props.updatedEmployee.id) {
this.props.update(this.state)
}else{
this.props.add(this.state)
}
//clear out form
this.setState({ id: '', firstName: '', lastName: '', email: '', phone: '' })
}
componentDidUpdate(nextProps){
if(nextProps.updatedEmployee.email !== this.props.updatedEmployee.email){
this.setState({
id: this.props.updatedEmployee.id,
firstName: this.props.updatedEmployee.firstName,
lastName: this.props.updatedEmployee.lastName,
email: this.props.updatedEmployee.email,
phone: this.props.updatedEmployee.phone
})
}
}
render() {
const { firstName, lastName, phone, email } = this.state;
return (
<div class="form">
<form onSubmit={this.handleSubmit}>
<div class="form-head">
<Divider horizontal>New Employee</Divider>
</div>
<input
placeholder="First Name"
required
name="firstName"
value={firstName}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="Last Name"
required
name="lastName"
value={lastName}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="E-Mail"
required
name="email"
value={email}
onChange={this.handleChange}
/><br /><br />
<input
placeholder="Phone Number"
required
name="phone"
value={phone}
onChange={this.handleChange}
/><br /><br />
<button class="submit-btn"><strong>Submit</strong></button>
<br />
</form>
</div>
)
}
}
export default EmployeeForm;
La raison pour laquelle j'ai ajouté le routeur Link était donc pour pouvoir rediriger la page d'accueil après avoir soumis le formulaire. Lorsque vous utilisez votre code fourni, soumettez des séjours sur la page Modifier le formulaire. Comment pourrais-je rediriger vers la page principale (pas la page d'édition) après avoir soumis?
Ok j'ai ajouté la redirection du routeur de réagisme et je reçois cette erreur. TypeError: cela.Props.add n'est pas une fonction. EditForm.HandlesUBMit SRC / Composants / Employee / EditForm.js: 21
Pouvez-vous montrer où vous avez ajouté idiotform composant?
Est idiotForm composant est
J'ai ajouté Main.js au code, qui montre où EdiDIFORT est
Laissez-nous Continuez cette discussion en chat .
Vous passez Essayez Mise à jour this.props.id comme deuxième argument sur this.props.update , mais dans App.js Editemployee que vous passez au formulaire comme update ) ne prend qu'un argument.
Editingemplifiee SIGNATURE POUR Prendre un ID Argument.
Bonjour Dylan, vérifiez la réponse mise à jour et faites-moi savoir si cela aide.