在react之外修改reactjs表单输入值

问题描述

我正在使用一个在后台使用react的js库。我想对其进行修改以在它呈现的表单上预填充输入。我只能从实例中访问顶级反应组件。我该如何设置值以使React能够拾取它？

我尝试将el.value和$el.attr('value','val')设置为无效。我也尝试过直接通过el.__reactInternalInstance$abc123._currentElement.props.value设置状态，但是也不起作用。

通话：

const event = new Event("input",{ bubbles: true })
el.dispatchEvent(event)

也没有帮助。

解决方法

我想出了一个使用jquery的解决方案，如果没有库，它就无法工作。用户单击输入时，第一行填充该字段。当他们扩展操作时，第二个填充它。请注意，展开任何操作都会被调用。但通过on单击，jquery似乎可以正常工作。问题的一部分是创建元素，直到扩展操作为止。

$('body').on('click','tr[data-param-name="<INPUT NAME>"] input',setInput)
$('.opblock').on('click',setInput)

我没有找到以下调用的链接，但这似乎是通过react来设置值的。

    function setInput (e) {
        let xinput = $('tr[data-param-name="<INPUT NAME>"] input')
        let target = xinput[0]
        if (xinput.val() == '') {
            let value = "INPUT VALUE"
            const setter = Object.getOwnPropertyDescriptor(target,"value").set
            const prototype = Object.getPrototypeOf(target)
            const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype,'value').set
            if (setter && setter !== prototypeValueSetter) {
                prototypeValueSetter.call(target,value)
            } else {
                setter.call(target,value)
            }
            const event = new Event("input",{bubbles: true})
            target.dispatchEvent(event);
        }
    }