如何以编程方式填充使用React构建的输入元素？

小编典典

如何以编程方式填充使用React构建的输入元素？

reactjs

我的任务是使用React构建的抓取网站。我正在尝试填写输入字段，并使用javascript注入页面（移动设备中的selenium或webview）来提交表单。这在其他所有站点+技术上都像魅力一样起作用，但是React似乎是一个真正的痛苦。

所以这是示例代码

var email = document.getElementById( 'email' );
email.value = '[email protected]';

我的值在DOM输入元素上更改，但是React不会触发change事件。

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

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

徒劳无功

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

不工作

email.onChange( event );

不工作

我不敢相信与React的互动变得如此困难。我将不胜感激任何帮助。

谢谢

阅读 189

2020-07-22

共1个答案

小编典典

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

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

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>

2020-07-22