使用 JQuery 填写 React 表单

Question

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

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

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

由于在提交时触发单击事件验证失败，因此未检测到这些值，就像表单中未输入任何数据一样。

我尝试了多种触发器，包括 keyup、keydown、keypress、焦点、模糊和更改。

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

这是 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

这可以解决问题

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 事件不是一对一的。