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

Question

我使用的是一个js-lib，它在后台使用react。我想修改它，以便在它呈现的表单上预先填充输入。我只能从实例化中访问顶级react组件。我如何设置值以使react拾取它？

我尝试过设置el.value和$el.attr('value', 'val')，但都没有成功。我也尝试过直接用el.__reactInternalInstance$abc123._currentElement.props.value设置状态，但也不起作用。

呼叫：

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

也无济于事。

Answer 1

我提出了一个使用jquery的解决方案，如果没有库，它就无法工作。当用户单击输入时，第一行将填充字段。当他们展开操作时，第二个填充它。请注意，在扩展任何操作时都会调用一个。但是jquery似乎可以很好地使用on点击。问题的一部分是，元素是在操作展开之前创建的。

$('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);
}
}