如何在CefSharp中为嵌入的React网页设置state变量

当前直接给DOM输入框赋值后，React无法识别值变化、不同步更新组件state的情况，是React 受控组件的固有设计机制导致的：
React不会直接监听DOM原生的value属性变化，它会为每个受控输入元素维护内部独立的值引用，只有真实用户输入触发了合成事件时，React才会将最新的DOM值同步绑定到对应组件的state上。通过document.getElementById('xxx').value = 'xxx'直接修改DOM属性的操作，完全绕开了React的事件触发流程，因此无法被登录逻辑捕获。

方案1：模拟真实输入流程（无需修改React端代码，首选方案） #

不需要直接修改React内部state（直接修改反而会触发React不可变状态警告，甚至导致组件渲染异常），只需要在给DOM赋值后，触发React可识别的输入事件，即可让React自动完成值到state的同步。
可以直接传入EvaluateScriptAsync执行的通用逻辑如下：

// 通用React兼容输入赋值函数
function setReactInputValue(domElement, value) {
  // 定位React在DOM元素上挂载的原生value setter
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    'value'
  ).set;
  // 写入真实DOM值
  nativeInputValueSetter.call(domElement, value);
  // 触发带冒泡的input事件，让React组件完成state同步
  domElement.dispatchEvent(new Event('input', { bubbles: true }));
}

// 业务赋值
setReactInputValue(document.getElementById('email'), 'abc@email.com');
setReactInputValue(document.getElementById('password'), '你的登录密码');

// 等待事件循环完成state同步后，再触发登录点击
setTimeout(() => {
  document.getElementById('login').click();
}, 100);

该方案的核心优势：

• 走和真实用户输入完全一致的事件触发路径，React可以无差别识别
• 不需要访问React组件内部实例，不依赖React版本的内部实现细节，兼容性最好
• 不会破坏React的渲染状态逻辑，不会引发组件异常

方案2：直接操作React内部实例修改state（兜底方案，不推荐） #

如果通用事件触发方案在特殊React版本下失效，可以通过DOM节点上挂载的React内部引用，定位到对应组件实例直接修改state：

const emailInput = document.getElementById('email');
// 匹配不同React版本挂载在DOM上的内部实例key
const reactInternalKey = Object.keys(emailInput).find(key => 
  key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')
);
const fiberNode = emailInput[reactInternalKey];
// 沿fiber树向上遍历，找到绑定了用户名/密码state的表单组件
let currentNode = fiberNode.return;
while (currentNode) {
  if (currentNode.stateNode?.state && 'username' in currentNode.stateNode.state) {
    currentNode.stateNode.setState({
      username: 'abc@email.com',
      password: '你的登录密码'
    }, () => {
      document.getElementById('login').click();
    });
    break;
  }
  currentNode = currentNode.return;
}

注意：该方案强依赖React的内部实现细节，React版本升级后对应的挂载key、fiber结构都可能发生变化，维护成本极高，仅作为特殊场景的兜底手段。

你当前的实现存在两处影响功能的问题：

• 密码赋值的JS字符串存在语法错误（多了一个闭合引号），会导致JS执行直接失败
• 赋值后直接触发登录按钮点击，没有等待React完成state同步，会出现点击时组件state仍为空的时序问题

修正后的C#实现参考：

public MainWindow()
{
    CefSettings settings = new CefSettings();
    settings.CachePath = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData) +
                         @"\CEF\cache";
    CefSharp.Cef.Initialize(settings);
    InitializeComponent();
    Browser.LoadingStateChanged += async (sender, args) =>
    {
        // 等待页面加载完全停止后再注入脚本
        if (args.IsLoading == false)
        {
            await Browser.EvaluateScriptAsync(@"
                function setReactInputValue(domElement, value) {
                  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
                    window.HTMLInputElement.prototype,
                    'value'
                  ).set;
                  nativeInputValueSetter.call(domElement, value);
                  domElement.dispatchEvent(new Event('input', { bubbles: true }));
                }
                setReactInputValue(document.getElementById('email'), 'abc@email.com');
                setReactInputValue(document.getElementById('password'), 'password123');
                setTimeout(() => {
                  document.getElementById('login').click();
                }, 100);
            ");
        }
    };
}

内容的提问来源于stack exchange，提问作者Ragini Singh