Füllen eines Reaktionsformulars mit JQuery

Question

So bin ich dabei, eine einfache Code-Injektion zu verwenden, um ein Formular zu füllen und zu senden, in den meisten Fällen kann ich die Textbox durch Auslösen des Blur-Ereignisses revalidieren im Falle einer reaktiven Form, die auf Redux aufgebaut ist, validiert sie nicht auf die gleiche Weise.

ich den folgenden Code versucht, mit, aber es funktioniert nicht:
top.jQuery('input#last-name-\\[0\\]').val('Smith').attr('value','Smith').trigger('blur');

Gibt es ein Ereignis, das ich sollte anstelle des Eingangsereignis feuern?

Die Werte werden nicht als abfeuern des Click-Ereignisses bei der Überprüfung der Übergabe erkannt, als ob keine Daten in das Formular eingegeben wurden.

Ich habe versucht eine Reihe von Triggern wie Key-up, Keydown, Tastendruck, Fokus, Weichzeichnen und geändert.

Bitte beachten Sie, dass die Verwendung von Standardwerten keine Option ist, da ich die Formulardaten in eine Website einfüge, die nicht meine eigene ist.

Dies ist der Code, der die Komponente zu bauen verwendet react:

function LastNameComponent(_ref) { 
    var index = _ref.index, 
     isFirstField = _ref.isFirstField, 
     formatValue = _ref.formatValue; 

    var minLength = 2; 
    var maxLength = 80; 
    return _react2.default.createElement(
     'div', 
     { className: 'form--item span3' }, 
     _react2.default.createElement(
      'label', 
      { className: 'search-label small field__icon_group' }, 
      _react2.default.createElement(
       'span', 
       null, 
       '*' 
      ), 
      'Last Name', 
      _react2.default.createElement(_TextInput2.default, { 
       id: "last-name-[" + index + "]", 
       model: "searchParams.searches[" + index + "].fields.lastName", 
       validators: { required: function required(value) { 
         return !value || value.length < minLength || value.length > maxLength; 
        } }, 
       formatValue: formatValue 
      }), 
      _react2.default.createElement(_ErrorMessage2.default, { 
       model: "searchParams.searches[" + index + "].fields.lastName", 
       messages: { required: "Please enter the member's Last Name" } 
      }) 
     ) 
    ); 
} 

Answer 1

Dies funktioniert der Trick

var target = $('input')[0] 
var event = document.createEvent("HTMLEvents"); 
$('input').val('Smith') 
event.initEvent("input", true, true); 
target.dispatchEvent(event); 

Arbeitsbeispiel mit demselben Code hier: https://codesandbox.io/s/W66Z4RA3E

Siehe https://github.com/facebook/react/issues/3249

Scheint wie Ereignis triggeri ng ist nicht trivial, da dom- und react-Ereignisse nicht eins zu eins sind.