如何使用JQuery填充React生成的输入字段

我正在尝试写一个书签以自动填充表单，以简化手动测试。该网站在React中实施。我使用JQuery尝试，例如：如何使用JQuery填充React生成的输入字段

$("#emailAddress").val("[email protected]").changed()

虽然input场在浏览器中可见更新，看来发动机罩下的字段不能被识别为改变的，验证在表单提交失败，他说数据丢失。

是否有一种可行的方法来使用ad-hoc JS自动填充React表单域，而无需更改任何源代码？（注意：我知道这种直接操作是而不是是在一般应用程序开发中使用React的正确方法。在这里，我正在寻找任何解决方案，无论多么hacky，以简化ad-特别手动测试）。

来源

2016-06-28 Bob Smith

这真的取决于这些字段是如何实现的。听起来像这些是[Controlled Components]（https://facebook.github.io/react/docs/forms.html#controlled-components），这意味着React控制着每个输入应该具有的值。基于React的网站使用的流行设计模式是在每个输入字段上附加一个“onChange”处理程序，其中每个更改事件都会将该字段的新值发送到某个集中存储区，这会导致React组件重新生成随着新的价值呈现。 –

...所以我想你会想在包含某个值的每个字段上手动触发更改事件，这将导致此集中式商店使用所需的值更新每个字段。 –

@MichaelParker - 谢谢，是的，该网站正在使用你所描述的'onChange'机制。关于如何生成适当的变更事件的任何想法？我尝试按照http://stackoverflow.com/a/2856602/6524176，但我没有运气。 –

//find element 
let elem = document.querySelector("#emailAddress"); 
//create event 
let event = new Event('input', { bubbles: true }); 
//set value 
elem.value="[email protected]"; 
//trigger event 
elem.dispatchEvent(event)

来源

2016-06-28 16:32:44

你值得一吻，我一直在寻找这个解决方案3个月，我已经放弃了。谢谢！！！！！！！！！！！！！！！！！！！！！ – Samul

从我们在评论中的讨论中，我的猜测是，您将要针对您计划修改的每个输入启动更改事件。

var element = document.getElementById('emailAddress'), 
    event = { 
     target: { 
      value: 'new value for the input' 
     } 
    }; 
element.onchange(event);

来源

2016-06-28 16:26:41

谢谢。不幸的是，我的元素没有'onchange'成员，但@ Utro的答案解决了这个问题。 –

如何使用JQuery填充React生成的输入字段

回答

相关问题