以编程方式填充ReactJS输入的正确方法

Question

我正在构建一个运行JavaFX Webkit的无头爬虫,它肯定不如chrome的v8强大.

但是我最近遇到了问题,我试图输入一个值来对渲染的输入字段做出反应.

这是我到目前为止所做的并且失败了.[ 注意:我无法控制源/ React代码.因为我正在尝试抓取目标网站 ]

1. jQuery - $('input.r_input').val("2");
2. Vanila JS - document.querySelector("input.r_input").value = "2";
3. 通过jquery触发器触发更改事件 - 更改,模糊,键盘,键控等.

4. 创建手动事件,如:

   event = new Event( event, {target: obj, bubbles: true} ); event.simulated = true; return obj ? obj.dispatchEvent(event) : false;

并触发一个input事件.

以上都不是.

我正在网站上的JS文件中添加部分反应代码,如果它可能有助于添加更多上下文.

创建:

t.prototype.createInputProps = function(e) {
    return {
        disabled: this.props.submitting || e > this.focusIndex,
        className: "r_input",
        type: "tel",
        name: "tan-" + e,
        maxLength: 1,
        pattern: "[\\d]*",
        tabIndex: 0,
        placeholder: "·",
        autoComplete: "off"
    }
}

渲染:

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 && 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 && r && us(is.a, {}, void 0, r))
}

不确定如果我需要添加handleKeyUp,但它包含一些验证代码.

任何帮助将不胜感激.

Answer 1

在您的情况下，看起来您可以keyup在更改值后在元素上触发事件。您可能还必须根据 React 状态更改等待元素出现在 DOM 中。尝试这个

setTimeout(function() {
    var event = new Event('keyup', { bubbles: true });
    $('input.r_input').val("2")[0].dispatchEvent(event);
}, 3000);

如果不访问相关页面，就很难提供明确的信息。

注意：我想出了 voodookeyup通过此线程调度一个事件，该线程表示 ReactonChange处理程序侦听input事件并查看您提供的调用的代码onKeyUp。我的示例代码使用onChangeReact 中的处理程序并input按照链接线程中的规定调度事件。

另请注意：我无法使用 jQuery 的方法来实现此功能trigger，也许您可​​以找出我在那里缺少的内容，但是使用本机 Javascript 进行事件调度在我下面的代码片段中正在工作。

继续阅读了解详情！

您的问题没有单一的答案，因为给定的 React 组件从input字段读取值的方式可能会有所不同，因此您需要查看您尝试操作的每个 React 实现。我大胆猜测这onChange是 React 捕获文本字段中输入的最常见方法。ReactonChange处理程序监听input事件。

React 的状态也可能正在更新，导致您正在查找的元素在jQuery 的.ready()回调触发后添加到 DOM 中。这意味着您的选择器找不到任何内容，因为它们查找的元素在查找时并不存在于 DOM 中。（这就是我在建议的解决方案中添加的原因setTimeout）。

在这里，我说明了 React 状态更改后元素出现在 DOM 中的问题，以及使用 jQuery 设置inputReact 管理的元素的值的工作示例。（运行时请务必查看控制台输出以了解发生了什么），全部完成后您应该在 HTML 中看到这一点

React 认为该值为 50

setTimeout(function() {
    var event = new Event('keyup', { bubbles: true });
    $('input.r_input').val("2")[0].dispatchEvent(event);
}, 3000);

jQuery(function() {
  console.log('jquery loaded');
  
  function searchForNodeOfInterest() {
    console.log('jQuery searching for nodes of interest');
    if(jQuery('#interesting-node').length === 0) {
      console.log('jQuery did not find the selector of interest');
    } else {
      console.log('jQuery found the selector of interest, setting input value...');
      var event = new Event('input', { bubbles: true });
      jQuery('#interesting-node').val(50)[0].dispatchEvent(event);
    }
  }
  
  searchForNodeOfInterest();
  
  setTimeout(searchForNodeOfInterest, 4000);
  console.log('jQuery - taking a nap, I will search again soon...');
});

var App = React.createClass({
  getInitialState: function() {
      return {
        hidden: true
      };
  },
  componentDidMount: function() {
    console.log('react mounted');
  },
  // Imagine something happens inside react (AJAX response comes in for example),
  // causing the nodes of interest to be rendered in DOM
  componentWillMount: function() {
    var that = this;
    setTimeout(function() {
      console.log('react updating the state...');
        that.setState({
          hidden: false,
          value: null
        })
    }, 2000);
  },
  handleInput: function(e) {
    console.log('react handling input...', e.target.value);
    this.setState({
      value: e.target.value
    })
  },
  render: function() {
    return this.state.hidden ? null : <form>React Powered Input: <input type="text" id="interesting-node" onChange={this.handleInput}/><p>React thinks the value is {this.state.value}</p></form>
  }
});


ReactDOM.render(<App />, document.getElementById('react'));

比随机时间量更可靠的技术setTimeout是使用包装器定期检查选择器是否存在，如下所示。