javascript - 通过 Javascript 填充 ReactJS HTML 表单

Question

我正在开发一个应用程序，在打开第 3 方网站后，我可以在浏览器上下文中运行我自己的 Javascript。作为基于 reactjs 构建并具有登录表单的示例网站，您可以引用此链接。
我正在尝试在 reactjs 生成的表单中填写用户名和密码。但是，我无法完全实现它。
我能够在用户名/密码字段和 reactjs 内部设置值的最接近的代码库是:

function setNativeValue(element, value) {
    element.focus();
    element.click();
    element.value = value;
    element.defaultValue = value;
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    let inputEvent = new Event("input", { target: element, bubbles: true });
    inputEvent.simulated = true;
    element.dispatchEvent(inputEvent);
}

document.getElementsByClassName("sc-qamJO")[0].click(); // login top button
setTimeout(function () {
    setNativeValue(document.getElementsByClassName("sc-AxheI")[1], "username"); // username
    setNativeValue(document.getElementsByClassName("sc-AxheI")[2], "password"); // password

    setTimeout(function () {
        document.getElementsByClassName("sc-fzpans")[3].click(); // login button
    }, 1000);
}, 1000);

问题:
但是，我无法自动提交 reactjs 表单。它会抛出一个错误 This field is required*错误，即使我已经根据我的理解和谷歌搜索建议正确地完成了所有事情。我无法满足字段验证器的要求。
我已经尝试了很多很多方法来自动提交表单。他们之中有一些是:

遵循 this stackoverflowquestion 上提供的所有方法

Getting the reactjs instance然后试图
设置状态。在这种情况下，.setState is not a function错误来了

这个github issue评论是我目前正在关注的
解决我的问题

我还尝试了一系列事件，例如 mouseenter mousedown ... keydown keypress keyup和其他人，similar to what this person is doing

你能告诉我该怎么做，为了满足登录表单中可用的 reactjs 验证器，以便使用 javascript 或 jQuery 在网站上自动提交表单。
注意 - 示例网站不包含 jQuery，因此纯 Javascript 代码也可以理解。
我使用 Chromium 作为浏览器。

Answer 1

基于setState例如我可以用这个提交登录表单:

const openLoginModal = () => document.getElementsByClassName('sc-qamJO')[0].click()
const submitLoginForm = () => document.getElementsByClassName('sc-fzpans')[3].click()

const getCompFiber = fiber => {
    let parentFiber = fiber.return

    while (parentFiber && typeof parentFiber.type === 'string') {
        parentFiber = parentFiber.return
    }

    return parentFiber
}

const getLoginForm = () => {
    const dom = document.getElementsByClassName('sc-AxheI')[1]
    const key = Object.keys(dom).find(key => key.startsWith('__reactInternalInstance$'))
    const domFiber = dom[key]

    if (domFiber == null) return null

    let compFiber = getCompFiber(domFiber)

    while (compFiber) {
        compFiber = getCompFiber(compFiber);

        if (compFiber && compFiber.stateNode && compFiber.stateNode.props && compFiber.stateNode.props.loginForm) {
            return compFiber
        }
    }
}

const login = (username, password) => {
    openLoginModal()

    setTimeout(() => {
        const loginForm = getLoginForm()

        loginForm.stateNode.props.loginForm.password = {
            value: password,
            error: false,
            errorMessage: 'This field is required',
            type: 'password'
        }

        loginForm.stateNode.props.loginForm.username = {
            value: username,
            error: false,
            errorMessage: 'This field is required'
        }

        submitLoginForm()
    }, 1000)
}

login('myUser', 'myPassword')

登录失败并出现 500 错误(这很奇怪)，但我检查了一下，当尝试使用无效的用户名/密码手动登录时，这是相同的错误代码，所以我猜它应该使用正确的凭据。