javascript - ReactJS 使用 C# Webview 从外部组件设置值

Question

尝试抓取使用 ReactJS、Formit 和 yup 编写的现有网站。我的 C# 代码片段使用 Microsoft.Toolkit.Forms.UI.Controls.Webview

functionString = String.Format("document.getElementById('ghinNumber').value = {0};", b.Ghin);
   await wbc.InvokeScriptAsync("eval", new string[] { functionString }); 

C# 代码按预期工作。我坚持如何处理 LoginForm React 组件（请参阅下面的 Login 组件 JS 代码），因为它保持自己的状态，最终呈现 HTML DOM 元素覆盖我用 C# 以编程方式设置的内容。我已经阅读了 ReactJS 文档和教程，让我对 PROPS 和 STATE 有了基本的了解。我意识到我必须以某种方式更新登录组件维护的状态。我知道模拟keydown、keyup、input、click等各种标准事件不是一件简单的事情。我不知道如何使用C#和Webview控件来处理它。因为我正在抓取一个网站，所以我无法修改来自服务器的现有 JS 代码。有人可以帮忙吗？

import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import keyboardKeys from "../../../shared/variables/keyboard-keys";
import { Formik } from "formik";
import * as Yup from "yup";

class LoginForm extends Component {
  validationSchema = Yup.object({
    lastName: Yup.string().required("Required"),
    ghinNumber: Yup.string().required("Required")
  });

  onSubmit = (values, { setSubmitting }) => {
    setSubmitting(false);
    this.props.login(values.lastName, values.ghinNumber);
  };

  render() {
    return (
      <Formik
        onSubmit={this.onSubmit}
        initialValues={{ lastName: "", ghinNumber: "" }}
        validationSchema={this.validationSchema}
      >
        {options => this.renderForm(options)}
      </Formik>
    );
  }

  renderForm(options) {
    return (
      <Fragment>
        <div className="login_form columns">
          <div className="row">
            <div className="col is-full">
              <label className="white" htmlFor="login_id">
                GHIN Number
              </label>
              <input
                type="text"
                id="ghinNumber"
                value={options.values.ghinNumber}
                name="ghinNumber"
                onBlur={options.handleBlur}
                onChange={options.handleChange}
              />
              <span className="error">
                {options.touched.ghinNumber ? options.errors.ghinNumber : ""}
              </span>
            </div>
          </div>
          <div className="row">
            <div className="col is-full">
              <label className="white" htmlFor="login_password">
                Last Name
              </label>
              <input
                type="text"
                id="lastName"
                value={options.values.lastName}
                name="lastName"
                onBlur={options.handleBlur}
                onChange={options.handleChange}
                onKeyDown={e => {
                  if (e.keyCode === keyboardKeys.ENTER) {
                    options.handleSubmit();
                  }
                }}
              />
              <span className="error">
                {options.touched.lastName ? options.errors.lastName : ""}
              </span>
            </div>
          </div>
          {/* <div className="row">
                        <div className="col is-full">
                            <input type="checkbox" id="remember_me" name="remember_me" />
                            <label className="white" htmlFor="remember_me">Remember Me</label>
                        </div>
                    </div> */}
          <div className="row">
            <div className="col is-2-of-3 h-centered">
              <button
                type="submit"
                className="btn fill cardinal"
                onClick={options.handleSubmit}
              >
                LOG IN
              </button>
            </div>
          </div>
          {/* <div className="row">
                        <div className="col is-full">
                            <button className="btn lnk white">Forgot login information?</button>
                        </div>
                    </div> */}
        </div>
      </Fragment>
    );
  }
}

LoginForm.propTypes = {
  login: PropTypes.func.isRequired
};

export default LoginForm;

标签： javascriptc#reactjs