如何以编程方式填充使用 React 构建的输入元素? [英] How to programmatically fill input elements built with React?

问题描述

我的任务是抓取用 React 构建的网站.我正在尝试填写输入字段并使用 javascript 注入页面(移动中的 selenium 或 webview)提交表单.这在所有其他网站 + 技术上都很有效，但 React 似乎真的很痛苦.

这是一个示例代码

var email = document.getElementById('email');email.value = '[e-mail]';

我在 DOM 输入元素上的值发生了变化，但 React 没有触发更改事件.

我一直在尝试多种不同的方法来让 React 更新状态.

var event = new Event('change', { bubbles: true });email.dispatchEvent(事件);

无用

var event = new Event('input', { bubbles: true });email.dispatchEvent(事件);

不工作

email.onChange( event );

不工作

我无法相信与 React 交互变得如此困难.我将不胜感激任何帮助.

谢谢

解决方案

React 正在监听文本字段的 input 事件.

您可以更改值并手动触发输入事件，react 的 onChange 处理程序将触发:

class Form extends React.Component {构造函数(道具){超级(道具)this.state = {值:''}}句柄变化(e){this.setState({value: e.target.value})console.log('状态更新为', e.target.value);}使成为() {返回 (<div><输入id='文本字段'值={this.state.value}onChange={this.handleChange.bind(this)}/><p>{this.state.value}</p>

)}}ReactDOM.render(<表格/>,document.getElementById('app'))document.getElementById('textfield').value = 'foo'const event = new Event('input', { bubbles: true })document.getElementById('textfield').dispatchEvent(event)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id='app'></div>

I'm tasked with crawling website built with React. I'm trying to fill in input fields and submitting the form using javascript injects to the page (either selenium or webview in mobile). This works like a charm on every other site + technology but React seems to be a real pain.

so here is a sample code

var email = document.getElementById( 'email' );
email.value = '[e-mail]';

I the value changes on the DOM input element, but the React does not trigger the change event.

I've been trying plethora of different ways to get the React to update the state.

var event = new Event('change', { bubbles: true });
email.dispatchEvent( event );

no avail

var event = new Event('input', { bubbles: true });
email.dispatchEvent( event );

not working

email.onChange( event );

not working

I cannot believe interacting with React has been made so difficult. I would greatly appreciate any help.

Thank you

解决方案

React is listening for the input event of text fields.

You can change the value and manually trigger an input event, and react's onChange handler will trigger:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: ''}
  }
  
  handleChange(e) {
    this.setState({value: e.target.value})
    console.log('State updated to ', e.target.value);
  }
  
  render() {
    return (
      <div>
        <input
          id='textfield'
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
        />
        <p>{this.state.value}</p>
      </div>      
    )
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById('app')
)

document.getElementById('textfield').value = 'foo'
const event = new Event('input', { bubbles: true })
document.getElementById('textfield').dispatchEvent(event)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

这篇关于如何以编程方式填充使用 React 构建的输入元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！