通过Javascript填充ReactJS HTML表单

小编典典

通过Javascript填充ReactJS HTML表单

reactjs

我正在开发一个应用程序，该应用程序可以在打开第三方网站后在浏览器上下文中运行自己的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*即使我根据自己的理解和Google搜索建议正确完成了所有操作，也会引发错误错误。我无法满足现场验证者的要求。

我尝试了很多方法来自动提交表单。他们之中有一些是：

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

您能告诉我该怎么做，以满足登录表单中可用的reactjs验证器，以便该表单可以使用javascript或jQuery在网站上自动提交。

注意-示例网站不包含jQuery，因此从理解的角度来看，纯Javascript代码也将起作用。

我正在使用Chromium作为浏览器。

阅读 351

2020-07-22

共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错误（这很奇怪），但是我检查了一下，并尝试使用无效的用户名/密码手动登录时使用了相同的错误代码，因此我认为它应该使用适当的凭据才能正常工作。

2020-07-22