web-dev-qa-db-fra.com

React.js définissant la valeur de l'entrée

Je suis un débutant avec react.js et c'est incroyable mais je suis confronté à un vrai problème: j'ai besoin de définir la valeur d'une entrée en utilisant du javascript simple et pur mais pour une raison quelconque, react.js ne fonctionne pas comme prévu. Prenons cet exemple: ouvrez cette URL http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

Vous verrez qu'il y a un champ de saisie "Email" dont l'ID est "CntctFrm2emailField". J'essaie d'en changer la valeur en utilisant javascript avec ce code:

document.getElementById("CntctFrm2emailField").value = "[email protected]";

Mais pour une raison quelconque, React.js ne met pas à jour cette valeur sur sa cause principale si vous essayez d'envoyer le formulaire (en cliquant sur le bouton ENVOYER), vous verrez qu'il affichera un message d'erreur indiquant que le courrier électronique n'est pas correctement rempli. MAIS une fois que je clique dans le champ de l'e-mail et que je tape une lettre et que je clique sur le bouton ENVOYER, cela fonctionne très bien, je veux dire, React.js voit la nouvelle valeur.

Alors, comment puis-je changer une valeur d'entrée et avoir React.js pour mettre à jour cette valeur aussi?

javascriptjqueryhtmlreactjs
22
Sitepor500.com.br

J'ai écrit et utilisé cette fonction pour déclencher le changement d'état du champ:

function doEvent( obj, event ) {
    /* Created by [email protected] */
    var event = new Event( event, {target: obj, bubbles: true} );
    return obj ? obj.dispatchEvent(event) : false;
}

Utilisez-le comme ceci:

var el = document.getElementById("CntctFrm2emailField");
el.value = "[email protected]";
doEvent( el, 'input' );
14
David Refoua

Vous devriez publier votre code afin d'obtenir une réponse mieux/plus adaptée à votre situation, mais on pense que cela fonctionnera est simplement de définir le

defaultValue

au lieu de value de l'entrée. Jetez un œil à la console de votre navigateur, c'est ce que react y enregistrera.

Selon votre code, vous pouvez définir statesvalueonKeyUp ou similaire avec une fonction ou récupérer la nouvelle valeur des entrées lorsque le formulaire est soumis .

9
chris p bacon

Pour React 16 les solutions ci-dessus ne fonctionnent pas. Vérifiez cela problème de GitHub.

function setNativeValue(element, value) {
    let lastValue = element.value;
    element.value = value;
    let event = new Event("input", { target: element, bubbles: true });
    // React 15
    event.simulated = true;
    // React 16
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    element.dispatchEvent(event);
}

var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");
5
Ajay Bhosale

J'avais un formulaire que je devais soumettre pour une surveillance. Je l'ai fait comme ça:

$("input[type=email]").value = "[email protected]"
$("input[type=email]").defaultValue = "[email protected]"
$("input[type=password]").value = "mystellarpassword"
$("input[type=password]").defaultValue = "pinpmystellarpasswordss"
$("input[type=email]").dispatchEvent(new Event('input', {target: $("input[type=email]"), bubbles: true} ));
$("input[type=password]").dispatchEvent(new Event('input', {target: $("input[type=password]"), bubbles: true} ));
$("button.login").click()

Notez que pour le site Web auquel je me connectais, j'ai dû définir à la fois la valeur et la valeur par défaut. Il y avait une logique de validation supplémentaire liée à l'entrée.

1
Kenny Cason

Ceci est la clé de votre question,

Mais pour une raison quelconque, React.js ne met pas à jour cette valeur sur son noyau

La raison principale est que réagir fonctionne dans un "dom ombre", et votre

document.getElementById("CntctFrm2emailField").value = "[email protected]";

Inst mettre à jour la valeur reacts de quelque manière que ce soit juste l'objet dom fenêtre.

React a intégré des fonctions pour mettre à jour la valeur de l'entrée. Essayez de cette façon.

Consultez cette page pour plus d'informations sur les formulaires React: https://facebook.github.io/react/docs/forms.html#controlled-components

0
jmingov

Tout d'abord, vous ne devriez jamais travailler avec un objet "document" dans React.js. C'est un gros non non. Vous ne devez pas non plus accéder à l'élément DOM, mais si vous savez ce que vous faites (comme les animations), vous devez créer un objet "ref", hors sujet, pour accéder à l'élément DOM.

La première chose que vous devriez avoir un objet à l'intérieur de l'objet d'état pour votre formulaire. Disons que vous avez des champs "nom d'utilisateur" et "mot de passe" dans votre formulaire.

state={form:{username:"","password:""}

Parce que les champs de saisie ont leur propre état, tout ce que nous tapons là sera stocké dans le champ de saisie. Nous devons nous débarrasser de l'état du champ d'entrée et ne compter que sur l'objet d'état. Nous voulons avoir une seule source de vérité, alors convertissez "entrée" en "élément contrôlé". Les éléments contrôlés n'ont pas leur propre état, ils obtiennent toutes les données, via des accessoires et ils notifient les modifications apportées aux données en provoquant des événements. Nous utilisons un accessoire "value" pour définir la valeur des entrées. Étant donné que les champs de saisie sont initialisés sous forme de chaînes vides, nous ne pourrons pas taper quelque chose à l'intérieur du champ de saisie. La solution consiste à gérer dynamiquement l'événement de modification des champs de saisie.

handleChange=e=>{
    const form={...this.state.form}
    form[e.currentTarget.name]=e.currentTarget.value
    this.setState({account})}

<input value={this.state.form.username} change={this.handleChange} name="username"/>
<input value={this.state.form.password} change={this.handleChange} name="password" />
0
Yilmaz