résolu Voir le commentaire ci-dessous (il suffisait de déplacer uniquement le sélecteur et la fonction de la section en dehors du composant de la classe pour le faire fonctionner.
J'ai donc un problème avec la fonction de réagir sur l'onchange. Il ne semble pas fonctionner quand il est transmis à un composant comme des accessoires. J'ai essayé de transmettre le composant au lieu des données, mais il n'a toujours pas fonctionné. Veuillez considérer l'exemple suivant: p>
return (
<Chooser
type={this.props.type}
section={
<Section
number={this.pops.number}
onChange={this.pops.handleChange}
/>
}
/>
3 Réponses :
C'est parce que vous devez la déstructurer comme ceci sur le prochain comme
const {hantlechange} = ceci.props.handlechange
Vous avez actuellement ceci comme votre Vous devez le modifier à ceci. P> Handlechange code> méthode handleChange = e => {
const { name, value } = e.target;
this.setState({ [name]: value })
}
Merci pour la mise à jour. J'ai mis à jour l'exemple. La fonction OnChange fonctionne maintenant mais le champ de saisie est de perdre la mise au point à chaque fois que je le fais.
Déménager à l'extérieur de la composante de classe résolue cela merci! Toute explication pourquoi exactement cela résout le problème?
Ceci est probablement parce que vous ne pouvez pas suivre les modifications dans les composants que vous avez créés à l'intérieur de la méthode de rendu. Une fois que vous avez modifié le champ de saisie, le composant de la classe rendrait pleinement rendu complet, ce qui cémirait qu'il n'y ait aucune modification transversale car elle retraitera les composants du rendu.
Vous pouvez envelopper handlechange () code> dans une fonction anonyme afin qu'elle attendra activement que vous apporte des modifications à l'entrée. Sinon, il fonctionnera sur le rendu. const Section = ({ number, handleChange }) => (
<Fragment>
<div>
<label>Number</label>
<input
type='text'
name='number'
placeholder='123456789'
value={number}
onChange={(e) => handleChange(e)}
/>
</div>
</Fragment>
)
Merci pour la contribution. Il n'a pas résolu le «problème de mise au point perdant» de l'entrée dans mon exemple, malheureusement. Toute idée d'amélioration l'apprécierait fortement!
Pouvez-vous partager le code de l'exemple similaire de la modification d'entrée Perdre la mise au point que vous parlez?