Quel est le meilleur moyen de déclencher l'événement onchange de réagir js

Pour Réagir 16 et Réagir >=15.6

Setter .value= ne fonctionne pas comme nous le voulions en raison de Réagir de la bibliothèque remplace la valeur d'entrée du setter mais nous pouvons appeler la fonction directement sur la input comme contexte.

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'react 16 value');

var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);

Pour les textarea élément que vous devez utiliser prototype de HTMLTextAreaElement classe.

Nouveau codepen exemple.

Tous les crédits à ce contributeur et sa solution

Réponse dépassée seulement pour Réagir <=15.5

Avec react-dom ^15.6.0 vous pouvez utiliser simulated drapeau sur l'objet d'événement pour l'événement de passer à travers

var ev = new Event('input', { bubbles: true});
ev.simulated = true;
element.value = 'Something new';
element.dispatchEvent(ev);

J'ai fait un codepen avec un exemple

De comprendre pourquoi le nouveau drapeau est nécessaire, j'ai trouvé ce commentaire très utile:

La logique d'entrée de Réagir maintenant que la déduplication de modifier les événements, afin qu'ils ne mettent pas le feu
plus d'une fois par valeur. Il écoute les deux navigateur onChange/onInput
les événements ainsi que les jeux sur le nœud DOM valeur prop (lorsque vous mettez à jour les
valeur via javascript). Cela a pour effet de bord de sens que si vous
mise à jour de la saisie de la valeur entrée manuellement.value = 'foo', puis l'envoi d'une
ChangeEvent avec { cible: entrée } Réagir permettra de vous enregistrer à la fois l'ensemble
et l'événement, voir sa valeur est toujours `foo", considère que c'est un doublon
de l'événement et à l'avaler.

Cela fonctionne bien dans la plupart des cas en raison d'un "vrai" navigateur lancé
l'événement n'a pas de déclenchement fixe sur l'élément.de la valeur. Vous pouvez renflouer de
cette logique secrètement par le balisage de l'événement de déclenchement avec une simulation de
drapeau de réagir et sera toujours le feu de l'événement.
https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128

Je sais que cette réponse arrive un peu tard mais j'ai récemment été confronté à un problème similaire. Je voulais le déclenchement d'un événement sur un ensemble de composants. J'avais une liste avec la radio et la case à cocher type de widgets (ils ont été les divs qui se comportaient comme des cases à cocher et/ou des boutons radio) et dans un autre endroit dans l'application, si quelqu'un a fermé une boîte à outils, j'avais besoin de le décocher.

J'ai trouvé une jolie solution simple, ne sais pas si c'est la meilleure pratique, mais il fonctionne.

var event = new MouseEvent('click', {
 'view': window, 
 'bubbles': true, 
 'cancelable': false
});
var node = document.getElementById('nodeMyComponentsEventIsConnectedTo');
node.dispatchEvent(event);

Cela déclenche l'événement click sur le domNode et mon gestionnaire attaché à réagir a été en effet appelé ainsi, il se comporte comme je attendre si quelqu'un a cliqué sur l'élément. Je n'ai pas testé onChange, mais il doit travailler, et ne sais pas comment cela va juste très anciennes versions d'IE, mais je crois que le MouseEvent est pris en charge dans au moins IE9 et jusqu'.

J'ai finalement abandonné ce pour mon cas d'utilisation particulier parce que mon composant, était très faible (seulement une partie de mon application utilisée réagir puisque je suis encore à apprendre) et j'ai pu réaliser la même chose d'une autre manière sans obtenir des références pour les nœuds dom.

Mise à JOUR:

Comme d'autres l'ont dit dans les commentaires, il est préférable d'utiliser this.refs.refname pour obtenir une référence à un nœud dom. Dans ce cas, refname est la ref que vous avez joint à votre composant via <MyComponent ref='refname' />.

Le déclenchement des événements de changement arbitraire et les éléments crée des dépendances entre les composants qui sont difficiles à comprendre. Il est préférable de s'en tenir à Réagir d'une façon de flux de données.

Il n'est pas simple extrait de déclencher Réagir de l'événement de changement. La logique est à l'œuvre dans ChangeEventPlugin.js et il y a différentes branches de code pour les différents types d'entrée et de navigateurs. En outre, les détails de mise en œuvre varient selon les versions de Réagir.

J'ai construit réagir-déclencheur de changement que le fait de la chose, mais il est destiné à être utilisé pour le test, non pas comme une production de la dépendance:

let node;
ReactDOM.render(
  <input
    onChange={() => console.log('changed')}
    ref={(input) => { node = input; }}
  />,
  mountNode
);

reactTriggerChange(node); //'changed' is logged

CodePen

eh bien, puisque nous utilisons des fonctions pour gérer un événement onchange, nous pouvons le faire comme ceci:

class Form extends Component {
 constructor(props) {
  super(props);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
  this.state = { password: '' }
 }

 aForceChange() {
  //something happened and a passwordChange
  //needs to be triggered!!

  //simple, just call the onChange handler
  this.handlePasswordChange('my password');
 }

 handlePasswordChange(value) {
 //do something
 }

 render() {
  return (
   <input type="text" value={this.state.password} onChange={changeEvent => this.handlePasswordChange(changeEvent.target.value)} />
  );
 }
}

Si vous utilisez de la Dorsale et de Réagir, je vous recommande l'une des opérations suivantes,

• De la colonne vertébrale.De réagir.Composant
• de réagir.épine dorsale

Ils ont tous deux aider à intégrer la Dorsale des modèles et des collections de Réagir avec vues. Vous pouvez utiliser l'épine Dorsale des événements comme vous le feriez avec épine Dorsale de vues. J'ai essayé les deux et n'ai pas vu beaucoup de différence, sauf un, est un mixin et les autres changements React.createClass à React.createBackboneClass.