J'essaie d'avoir désactivé le champ de saisie sélectionné / activé pour les modifications. Jusqu'à présent, je l'ai fait pour tous les champs à la fois comme mais je veux éditer uniquement le champ sélectionné en fonction de l'identifiant d'élément. J'ai essayé de le changer pour gérer comme un Tous les conseils à ce sujet? événement.target.id mais qui ne fonctionnait pas du tout.
3 Réponses :
Vous pouvez stocker les états modifiables de chaque entrée dans un objet: exemple de travail: 
Bien. Je pense que le code n'est pas valide. Je vais définir l'état au premier clic comme vide non ce qui a été fourni onclick alors l'état n'est pas mis à jour sur un autre onclick pour le même élément ID
@Jacktheknife j'ai oublié les supports carrés autour de ID dans greatinedit . Cela devrait fonctionner maintenant. Exemple de travail: codesandbox.io/s/exciting-nobel-b2k8p
Vous pouvez créer un composant qui encapsule l'état d'édition démo p> p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Cette solution est bonne lorsque la soumission de la forme est effectuée sur le bouton d'édition désactivée mais pas lors de la soumission entière (multiples formulaires) à la fois.
Par formulaire, vous voulez dire le
Ouais - J'ai plusieurs
J'ai proposé une solution de travail pour mon code basé sur la suggestion @trixn:
constructor(props) {
super(props);
this.state = { }
}
handleEdit(id) {
let setEdit = this.state[id];
this.setState( {[id]: !setEdit});
}
render(){
return(
<div className="col-md-3"><label>First Name</label></div>
<div className="col-md-6">
<input
type="text"
className="form-control react-form-input"
id="fname"
name="fname"
disabled={!this.state.fname}
/>
<i className="fas fa-edit" onClick = {() => this.handleEdit('fname')}></i>
</div>
</div>
<div className="col-md-3"><label>Last Name</label></div>
<div className="col-md-6">
<input
type="text"
className="form-control react-form-input"
id="lname"
name="lname"
disabled={!this.state.lname}
/>
<i className="fas fa-edit" onClick = {() => this.handleEdit('lname')}></i>
</div>
)}
La meilleure façon est de déplacer votre bouton d'entrée et d'édition dans un composant distinct qui aura un état distinct.
@demkovych J'y pensais au début, mais je regardais cela à la composante de niveau de forme plutôt que de seul champ sélectionné. J'ai été bloqué avec le composant parent car j'ai plusieurs formulaires à soumettre avec un seul bouton Soumettre uniquement