title: Correct way to programmatically fill a ReactJS input
body: <p>I am building a headless crawler running JavaFX Webkit, it definitely is not as powerful as chrome's v8.</p>
  
  <p>However I've run into problems lately, wherein I am trying to input a value to react rendered input fields.</p>
  
  <p>Here's what I have done till now and failed.[ <em>Note: I don't have control over the source / React code. Since I am trying to crawl a destination site</em> ]</p>
  
  <ol>
  <li>jQuery - <code>$('input.r_input').val("2");</code></li>
  <li>Vanila JS - <code>document.querySelector("input.r_input").value = "2";</code></li>
  <li>Trigger change events through jquery trigger - change, blur , keyup, keydown, etc.</li>
  <li><p>Creating a manual event like :</p>
  
  <p><code>event = new Event( event, {target: obj, bubbles: true} );
  event.simulated = true;
  return obj ? obj.dispatchEvent(event) : false;</code></p></li>
  </ol>
  
  <p>and triggering an <code>input</code> event.</p>
  
  <p>None of the above works.</p>
  
  <p>I am adding parts of react code from the JS file on the website if it may help to add some more context.</p>
  
  <p><strong><em>Create:</em></strong> </p>
  
  <pre><code>t.prototype.createInputProps = function(e) {
      return {
          disabled: this.props.submitting || e &gt; this.focusIndex,
          className: "r_input",
          type: "tel",
          name: "tan-" + e,
          maxLength: 1,
          pattern: "[\\d]*",
          tabIndex: 0,
          placeholder: "·",
          autoComplete: "off"
      }
  }
  </code></pre>
  
  <p><strong><em>Render :</em></strong> </p>
  
  <pre><code>t.prototype.render = function() {
      var e = this.props,
          t = e.meta,
          n = t.touched,
          r = t.error,
          o = (e.input.value, sa()("r_input", {
              "has-error": r &amp;&amp; n
          }));
      return us("article", {
          className: o
      }, void 0, us("div", {
          className: "r_inputs"
      }, void 0, ro.a.createElement("input", as({
          onPaste: this.handleOnPaste,
          ref: this.addInputToList,
          onKeyUp: this.handleKeyUp,
          value: this.getValue(0)
      }, this.createInputProps(0))), ro.a.createElement("input", as({
          ref: this.addInputToList,
          onKeyUp: this.handleKeyUp,
          value: this.getValue(1)
      }, this.createInputProps(1))), ro.a.createElement("input", as({
          ref: this.addInputToList,
          onKeyUp: this.handleKeyUp,
          value: this.getValue(2)
      }, this.createInputProps(2))), ro.a.createElement("input", as({
          ref: this.addInputToList,
          onKeyUp: this.handleKeyUp,
          value: this.getValue(3)
      }, this.createInputProps(3))), ro.a.createElement("input", as({
          ref: this.addInputToList,
          onKeyUp: this.handleKeyUp,
          value: this.getValue(4)
      }, this.createInputProps(4))), ro.a.createElement("input", as({
          ref: this.addInputToList,
          onKeyUp: this.handleKeyUp,
          value: this.getValue(5)
      }, this.createInputProps(5)))), n &amp;&amp; r &amp;&amp; us(is.a, {}, void 0, r))
  }
  </code></pre>
  
  <p>Not sure If I need to add <code>handleKeyUp</code>, but that contains some validation code. </p>
  
  <p>Any help will be appreciated.</p>