相关疑难解决方法(0)

我有一个HTML输入,其中包含值中的链接.

<input type = 'text' value = 'http://www.link.com' id = 'link' />

我正在使用jQuery来更改某个事件的值.

$('#link').val('new value');

上面的代码更改了文本框的值,但没有更改代码中的值(value ='http://www.link.com'保持不变).我还需要值=''来改变.

出于在控制台中进行调试的目的,React中是否有任何机制可以使用DOM元素实例来获取后备React组件？

之前已在生产代码中使用此问题的上下文中询问过此问题.但是,我的重点是用于调试的开发版本.

我熟悉React的Chrome调试扩展程序,但并非所有浏览器都可以使用.结合DOM资源管理器和控制台,可以很容易地使用"$ 0"快捷方式访问有关突出显示的DOM元素的信息.

我想在调试控制台中编写类似这样的代码:getComponentFromElement($ 0).props

即使在React开发版本中,也没有机制可以使用元素的ReactId来获取组件？

我正在开发一个应用程序，在该应用程序中，我可以在打开 3rd 方网站后在浏览器上下文中运行我自己的 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 表单。它抛出一个错误 …

我有一个简单的 React 组件：

state = {
  value: '',
};

render() {
  return <select onChange={this.handleChange} value={this.state.value}>
    <option value="">--</option>
    <option value="1">One</option>
  </select>;
}

handleChange = (e) => {
  this.setState({
    value: e.target.value,
  });
  console.log('Handling Change!!')
};

我希望能够通过普通的 javascript 或在本例中通过 jQuery 以编程方式触发事件处理程序。

$select = $('select');
$select.val('1');
// then
$select.trigger('change');
// or
$select.trigger('input');

但是这些都不会触发onChangeReact 组件中的处理程序，因此状态不会更新。

我的问题：如何onChange使用 DOM 和 Javascript触发处理程序？

[编辑]

为了进一步澄清，我正在像这样安装 React 组件：

el = document.createElement('div')
ReactDOM.render(MySelect, el)

$select = $(el).find('select');
$select.val('1');
// then
$select.trigger('change');
// or …