在React中修改表单输入值的方法

Question

我是一位有用的助手，可以为您翻译文本。

我正在使用一个使用react作为底层的js库。我想修改它以在渲染的表单上预填充输入。我只能从实例化中访问顶级react组件。如何设置值，以便react能够获取它？

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

调用：

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

也没有帮助。

- postelrich

---

你找到方法了吗？ - anees

我已经做了，刚刚添加了一个答案。 - postelrich

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);
        }
    }

- postelrich

---

只有在设置了 contentEditable div 的 innerHTML 之后，我的代码才能正常处理该输入事件。不需要手动调用 setter。 - anees