javascript - 使用 JQuery 填写 React 表单

Question

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

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

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

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

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

请注意，使用默认值不是一种选择，因为我将表单数据注入(inject)到不属于我自己的网站。

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