J'essaie de construire une forme d'entrée qui affichera des valeurs soumises dans une autre page en utilisant des crochets de réaction. Je peux voir les valeurs lorsque la console est connectée et ce que je recherche, c'est comment les ajouter en tant qu'éléments HTML.
Le code suivant est une version simplifiée de mon travail. P>
const DisplayList = ({ inputs }) => (
<div>
<h3>page 2 (parent component)</h3>
<div>{inputs}</div>
</div>
);
const AddList = () => {
const onSubmitForm = () => {
console.log(`
First name: ${inputs.firstName}
Last name: ${inputs.lastName}`);
};
const { inputs, handleInputChange, handleSubmit } = InputForm(onSubmitForm);
return (
<div>
<h3>page 1 (child component)</h3>
<form onSubmit={handleSubmit}>
<label>First Name: </label>
<input
type="text"
name="firstName"
onChange={handleInputChange}
value={inputs.firstName || ""}
required
/>
<label>Last Name: </label>
<input
type="text"
name="lastName"
onChange={handleInputChange}
value={inputs.lastName || ""}
required
/>
<button type="submit">Submit</button>
</form>
<hr />
<DisplayList />
</div>
);
};
export default AddList;
3 Réponses :
Je ne suis pas sûr de ce que vous essayez de faire peut-être:
Passez les entrées dans AddList:
et modifier la liste de diffusion à:
Je viens de donner );
entrée passée comme des accessoires au composant de deuxième page comme ci-dessous. et
Utilisé dans le composant comme ci-dessous.
Génial! C'est ce que je veux le faire. Juste un petit HICCUP - lorsque je saisis les entrées, le texte est ajouté simultanément. Il était censé ajouter une fois que le bouton est cliqué, similaire à ce qui se passe dans la console.log. Devrais-je utiliser une déclaration si / autre ou existe-t-il de meilleures alternatives?
Vous ne vous avez pas posé de question, pouvez-vous coller ici ce que vous souhaitez exactement être imprimé dans la page 2 après la soumission click s'il vous plaît.
D'accord, je vais essayer d'expliquer: Dans la composante Page 1, il y a un formulaire où vous entrez "John" dans la première entrée de nom et "Smith" dans la deuxième saisie de nom. Lorsque vous le soumettez, un texte "John Smith" devrait apparaître à la page 2 composante. Le problème est que vous tapez toujours les entrées, les textes de la composante Page 2 affichent en même temps. Les textes auraient dû apparaître uniquement après avoir cliqué sur le bouton. En d'autres termes, il devrait se comporter comme une liste de tâches et non des angles à faire.
D'accord, vous pouvez y parvenir en utilisant des modifications que j'ai faites dans le bac à sable ci-dessous. Codesandbox.io/s / Pass-Data-Data-to-Format-page-9weyk? Fichier = / ...
OMG, c'est exactement ce que je voulais dire. Merci beaucoup de m'avoir aidé!
Je ne suis pas sûr de ce que vous essayez de faire. Pour moi, la diffamation est la composante enfant de l'addlist
Pouvez-vous élaborer un peu, qu'entendez-vous exactement par 'Page différente' ? Jusqu'à présent, votre
@Yevgengorbunkov - ah, oui. Je voulais dire un autre composant. Mais dans le projet que je travaille, il est ajouté à une autre page. J'aurais dû clarifier plus tôt.