通过Javascript填充ReactJS HTML表单 [英] Populating ReactJS HTML Form via Javascript

问题描述

我正在开发一个应用程序，在该应用程序中，我可以在打开第三方网站后在浏览器上下文中运行自己的Javascript.作为一个基于reactjs并具有登录表单的示例网站，您可以参考此链接.

I'm working on an app in which I'm able to run my own Javascript inside browser context after opening a 3rd party website. As a sample website which is build on reactjs and has a login form, you can refer to this link.

我试图用reactjs生成的形式填写用户名和密码.但是，我无法完全实现它.

I'm trying to fill the username and password in the form which is generated by reactjs. However, I'm not able to completely achieve it.

我能够在用户名/密码字段和reactjs内设置值的最接近的代码库是:

The closest codebase by which I'm able to set value into the username/password field and inside reactjs is:

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表单.即使我根据我的理解和google搜索建议正确完成了所有操作，它也会引发错误This field is required*错误.我不能满足现场验证员的要求.

Problem: However, I'm not able to automatically submit the reactjs form. It throws an error This field is required* error, even though I have done everything correctly based on my understanding and google search suggestions. I'm not able to satisfy the field validators.

我尝试了很多方法来自动提交表单.其中一些是:

I have tried lot and lot of ways to automatically submit the form. Some of them are:

1. 遵循此stackoverflow提供的所有方法 问题
2. 获取reactjs实例然后尝试 setState.在这种情况下，会出现.setState is not a function错误
3. 此 github问题评论是我目前正在关注的内容 解决我的问题
4. 我还尝试了mouseenter mousedown ... keydown keypress keyup等事件的顺序，以及其他事件，

1. Following all the methods provided on this stackoverflow question
2. Getting the reactjs instance then trying to setState. In this case, .setState is not a function error comes
3. This github issue comments is what I'm currently following to solve my problem
4. I have also tried sequence of events like mouseenter mousedown ... keydown keypress keyup and others, similar to what this person is doing

请告诉我，为了满足登录表单中可用的reactjs验证程序，我该怎么办，以便使用javascript或jQuery在网站上自动提交表单.

Can you please tell, what should I do, in order to satisfy the reactjs validators available in the login form, so that the form gets automatically submitted on website using javascript or jQuery.

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

Note - The sample website does not contains jQuery, so a pure Javascript code will also work in terms of understanding.

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

推荐答案

基于setState示例，我可以使用以下方式提交登录表单:

Based on the setState example I could submit the login form with this:

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

The login failed with a 500 error (which is weird), but I checked and that's the same error code when trying to login manually with an invalid username/password, so I guess it should work with proper credentials.

这篇关于通过Javascript填充ReactJS HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！