Question

所以我正在尝试使用一些简单的代码注入来填充表单并提交它，在大多数情况下，我可以通过触发blur事件来重新验证文本框，但是在反应的情况下表单构建在redux上，它不会以相同的方式验证。

我尝试使用以下代码，但它不起作用：
top.jQuery('input#last-name-\\[0\\]').val('Smith').attr('value','Smith').trigger('blur');

是否存在我应该触发而不是输入事件的事件？

在提交失败验证时未检测到触发click事件的值，就好像没有在表单中输入数据一样。

我尝试了许多触发器，包括keyup，keydown，keypress，focus，blur和changed。

请注意，使用默认值不是一个选项，因为我将表单数据注入不属于我自己的网站。

这是用于构建组件的反应代码：

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

这就是诀窍

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

此处使用相同代码的工作示例：https://codesandbox.io/s/W66Z4RA3E

请参阅https://github.com/facebook/react/issues/3249

似乎事件触发非常简单，因为dom和react事件不是一对一的。

Answer 2

event.initEvent（“ input”，true，true）;现在已弃用。正确的方法是：

const runInject = (inputElement, value) => {
  $(inputElement)
    .val(value)
    .attr('value', value);
  const event = new Event('input', { bubbles: true, cancelable: true });
  inputElement.dispatchEvent(event);
};

Answer 3

在所有答案和大量谷歌搜索中，我发现这是可行的

function changeValue(input,value){

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

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

我们正在使用window.HTMLInputElement.prototype的{{1}}。该界面提供了用于操纵输入元素的选项，布局和表示的特殊属性和方法。

然后，我们将使用Object.getOwnPropertyDescriptor（）方法设置输入值。最后，我们将在输入上分配更改事件，以使用React onChange进行模拟

以下是此答案的详细说明：https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04

使用JQuery填充反应表单

3 个答案: