Je suis à la suite du Utilisation avec réact Tutorial Redux. Quelque chose que je n'ai vraiment pas, c'est comment récupérer l'entrée de l'utilisateur.
Ils construisent un conteneur de ligne filtre, dont la carte MapDispatchToprops est donc il injecte son propreProps.filter à la composant de présentation connecté. Si nous allons voir comment ce conteneur est construit OK, il y a la propriété "filtre". C'est clair. Maintenant, je veux construire un filtre de texte sur le même exemple. Donc, d'abord ici mon composant de présentation mais quand je viens écrire le conteneur, je ne sais pas comment obtenir une entrée utilisateur C'est quelque chose que je ferais avec jQuery $ (# texte) .val () mais ... est-ce le meilleur moyen? plus tard sur le même tutoriel, ils construisent un petit formulaire à Ajouter un TODO à la liste. Ok, allons voir comment ils attrapent l'entrée alors. attendre, où est la magie ici? Ont-ils injecté la valeur en "entrée" Variabile avec ce tour de référence? Est-ce exact?
Donc, s'il y avait 20 champs de saisie, dois-je utiliser 20 variables avec 20 réfjs différents? Toute aide est appréciée, merci
4 Réponses :
Cet exemple est là pour vous permettre de mieux comprendre la manière REACT-RECHUX de faire des choses typiques pour réagir-redux, telles que connecter un composant. Ce n'est pas un tutoriel d'apprendre à gérer l'état de saisie.
Donc, pour l'exemple de l'exemple, ils utilisent le Ils utilisent ce qu'on appelle un composant incontrôlé , c'est-à-dire un composant qui gère son état en interne. Il est pratique lorsque vous n'avez pas à traiter de forme complexe et lorsque la valeur de ce composant particulier n'est pas destinée à être utilisée ailleurs.
Mais, disons maintenant que ce texte TODDO sur le texte doit être enregistré sur le serveur par exemple. La valeur de cette entrée est désormais destinée à être utilisée ailleurs, dans ce cas, probablement dans un créateur d'action qui gère la demande postale. Dans ce cas, la valeur du formulaire figure dans votre magasin Redux Store et vous traitez maintenant avec composant contrôlé Réfontrée attribut à attribuer à la variable variable Le .Value .
Si vous souhaitez obtenir la saisie des utilisateurs, vous pouvez faire quelque chose comme ceci:
Ce démo Notez que le champ de saisie a une valeur RechercheForm '/ code> Le composant rend un champ d'entrée et un bouton pour déclencher l'action. < PRE> XXX this.refs.input.value . La méthode manusergoClick puis transmet cette valeur à un créateur d'action (qui a été transmis dans les accessoires du composant via MapDisPatchToprops).
N'est-ce pas la philosophie de Redux Philosophie? Je ne devrais-je pas récupérer l'entrée (si elle met à jour l'état de l'application ou non) dans le composant conteneur (MapDisPatchToprops) plutôt que dans un composant de présentation, comme c'est votre recherche?
Personnellement, je ne pense pas que cela casse la philosophie de Redux (1) L'état unique de la vérité (2) est en lecture seule (3) les modifications sont effectuées avec des fonctions pures. Voir Trois principes . Peut-être que quelqu'un d'autre a une opinion à ce sujet?
Je crois que cela a cassé la première règle. Comme mentionné dans réactjs.org/docs/uncontrolled-components.html , composant incontrôlé garde la source de la vérité dans le DOM.
FB ne recommande pas cela. réactjs.org/docs/refs-and- The-DOM.HTML # Legacy-API-String-Ref s I Personnellement, je n'aime personnellement pas ref soit (pas REFS), car il s'agit d'une référence supplémentaire qui nécessite que vous modifiez cela Référence Si vous déplacez des éléments imbriqués, ce qui le rend moins atomique et portable.
Changez votre fonction de soumission à l'adresse suivante.
const TodoSearch = ({onSubmit}) => (
<form
onSubmit={e => {
e.preventDefault()
onSubmit(e)
}}
>
<input placeholder="Text search" />
<input type="submit" value="Go" />
</form>
)
Je ne travaille pas, "Evt" est toujours indéfini à ce moment-là. Peut-être parce que ceci est un composant de conteneur et non un composant présentant?
J'utilise Ref pour obtenir la valeur de l'entrée, la méthode Handlesubmit () est dans la classe, de sorte qu'il peut être saisi par réf. Si vous souhaitez utiliser la méthode de l'envoi, mappez simplement des accessoires dans MapDispatchToprops ().
class AddTodo extends Component {
handleSubmit(event) {
let input = this.refs.input;
event.preventDefault();
if (!input.value.trim()) {
return
}
this.props.addTodo(input.value);
input.value = ''
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit.bind(this)}>
<input ref="input"/>
<button type="submit">
Add Todo
</button>
</form>
</div>
);
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
addTodo:(text) => {
dispatch(addTodo(text));
}
}
};
export default connect(null, mapDispatchToProps)(AddTodo);
Ce serait génial si vous pouviez ajouter des explications sur la manière / pourquoi votre code fonctionne
Je crois que c'est un problème de réaction, plutôt que de Redux. Et il est bien expliqué dans réactjs.org/docs/forms.html#controlled-Components.