Je n'arrive pas à comprendre comment je suis censé passer un objet en tant qu'accessoire lors de l'utilisation de useState dans Next JS.
J'ai un générateur lorem ipsum que j'ai créé dans les fonctions javascript. J'ai un composant appelé Paragraphsqui l'abrite. J'ai besoin de passer dans deux propriétés,
La longueur du paragraphe est définie par une entrée de texte où l'utilisateur tape entre 1 et 10. La longueur de la phrase est définie par des boutons radio.
Le problème que je rencontre est que lorsque vous entrez une valeur, le setState est appelé (intentionnel) et cela fonctionne, le problème est que cela fonctionne constamment. Je veux qu'il soit mis à jour uniquement lorsque je clique sur mon bouton "Aventure" pour générer les données. Je ne sais pas comment définir ces valeurs pour les définir en tant que valeurs de propriété d'objet et transmettre ensuite l'objet.
Ci-dessous mon code pour les champs
import React, { useState } from 'react'
import Paragraph from '../components/ipsum/Paragraph.js'
export default function rpgIpsum() {
const [paragraphNumber, setParagraphNumber] = useState(5)
const [sentenceLength, setSentenceLength] = useState(5)
const [data, setData ] = useState({
outputProps: {
paragraphNumber: 5,
sentenceLength: 5
}
})
return (
<div>
{data.outputProps.paragraphNumber}
<div className="container">
<div className="row">
<div className="col-md-2 d-sm-none d-xs-none d-md-block d-none">
{/* <img src="public/images/Bard.jpg" alt="Lorem Ipsum Bard!" className="img-fluid" /> */}
</div>
<div className="col-md-10">
<h2>Looking to add some fun to your filler text?</h2>
<h5>Let's Spiffy up your copy with some RPG inspired Lorem Ipsum!</h5>
<div className="form-container">
<p>First, select how many paragraphs you want.
<input
type="text"
name="para"
value={paragraphNumber}
className="para-box"
required
onInput={
event => setParagraphNumber(parseInt(event.target.value))
}
/>
<small id="para-box-help" className="form-text text-muted">(Max of 10)</small>
</p>
<p>Next, select the length of the sentences</p>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="sentences"
value="3"
required
onInput={
event => setSentenceLength(parseInt(event.target.value))
}
/>
<label className="form-check-label" htmlFor="inlineRadio1">Short</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="sentences"
value="5"
required
onInput={
event => setSentenceLength(parseInt(event.target.value))
}
/>
<label className="form-check-label" htmlFor="inlineRadio2">Medium</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="sentences"
value="7"
required
onInput={
event => setSentenceLength(parseInt(event.target.value))
}
/>
<label className="form-check-label" htmlFor="inlineRadio3">Long</label>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary"
onClick={ event => "what do i do here?" ))}
>Adventure!</button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<hr />
<Paragraph paragraphNumber={data.outputProps.paragraphNumber} sentenceLength={data.outputProps.sentenceLength}/>
</div>
</div>
</div>
</div>
)
}
Ce que je ferais, c'est refactoriser la fonctionnalité d'entrée dans un composant séparé et utiliser une prop de fonction pour transmettre les données d'entrée à un composant externe qui contient également le Paragraphcomposant, comme ceci :
// rpgIpsum.js
export default function rpgIpsum() {
const [settings, setSettings] = useState({
paragraphNumber: 5,
sentenceLength: 5
});
return (
<>
<ParagraphInput onSubmit={setSettings} />
<Paragraph {...settings} />
</>
);
}
// ParagraphInput.js
export default function ParagraphInput({ onSubmit }) {
const [paragraphNumber, setParagraphNumber] = useState(5);
const [sentenceLength, setSentenceLength] = useState(5);
return (
<div>
{/* ... */}
<button
type="submit"
onClick={() => onSubmit({paragraphNumber, sentenceLength})}
>Adventure!</button>
</div>
);
}
De cette façon, settingsin rpgIpsumn'est mis à jour que lorsque le bouton à l'intérieur ParagraphInputest enfoncé, et non à chaque changement d'entrées.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots