Génération de plusieurs champs dynamiques
Après 2 jours de luttes acharnées, j'ai décidé de poster ici
Mon souci est le suivant :
Dans le cadre d'un projet, je souhaite générer un nombre de champs de saisie égal à la taille d'un tableau. Exemple :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function App() {
const [UseState, setUseState] = useState("");
const array = [0, 1, 2];
const HandleAdding = (e) => {
e.preventDefault;
const returnJson = { UseState };
//rest of the code
};
return (
<div>
{array.map(() => (
<form onSubmit={HandleAdding}>
<input value={UseState} onChange={(e) => setUseState(e.target.value)} />
</form>
))}
</div>
);
} |
On peut déjà connaître le problème, lors de l'insertion d'une valeur sur un champ, cette même valeur sera insérée sur tous les autres champs qui partagent le même UseState comme valeur.
Voici un CodeSandBox pour concrétiser davantage mon soucis:
https://codesandbox.io/s/adoring-rgb...le=/src/App.js
J'ai essayé beaucoup de choses pour résoudre mon problème comme ceci:
https://codesandbox.io/s/blissful-ra...le=/src/App.js (J'essaye d'adapter le code pour résoudre mon soucis).
Je ne mets rien de plus pour éviter que le sujet ne devienne trop long. Alors, auriez-vous une solution pour résoudre le problème ? Pour ma part je suis à court d'idées, et encore débutant sur React. Merci d'avance! ^^
