模拟更改事件以使用香草JS脚本将文本输入到React Textarea中 [英] Simulate change event to enter text into react textarea with vanilla js script

问题描述

我知道这不是反应方式，也不是理想的任何其他版本。但是情况超出了我的控制范围，我需要找到解决方法或破解。话虽这么说......

I know this is not "the react way," or any other version of ideal. But circumstances are beyond my control and I need to find a work around or "hack". That being said....

我正在寻找一种以编程方式将文本内容输入到< textarea> 表示为react组件一部分的元素。问题是我需要从react应用程序外部执行此操作。 react应用由其他人编写，编译，缩小和交付。

I am looking for a way to programmatically enter text content into a <textarea> element that is rendered as part of a react component. The catch is I need to do this from outside of the react app. The react app was written, compiled, minified, and delivered by someone else.

< textarea> 具有分配了 id 属性，因此我可以对其进行查询并轻松设置其 .value 。 但是我的真正目的是影响react应用程序的状态 ，也就是说，使用文本区域绑定的 onChange 处理程序，使我的字符串进入呈现文本区域的组件状态。

The <textarea> has an id attr assigned, so I can query it and set its .value easily enough. However my real aim is to effect the state of the react application, that is to say, to use the text area's bound onChange handler to get my string into the state of the component which renders the text area.

到目前为止，我已经尝试过：首先，设置< textarea> 的值。第二：触发更改事件。但是到目前为止，这不会触发 onChange 回调。

So far I have tried to First: Set the value of the <textarea>. Second: trigger a "change" event. But so far this does not fire the onChange callback.

为了让您了解我实际上在说什么，我创建了此挑战的最小示例。

To give you an idea of what I am actually talking about I created a minimal example of this challenge.

这是该堆栈闪电的代码：

Here's the code from that stackblitz:

反应部分。
这表示我无法控制的react应用。

The react part. This represents the react app that I have no control over.

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {

  constructor(props){
    super(props)

    this.state = {
      message: "" //I would like this be the value of what I place into the text area
    }
  }

  changeHandler = e => {
    this.setState({
      message: e.target.value
    }, ()=>{ console.log(this.state) })
  }

  render() {
    return (
      <div className="App">
        <textarea 
          id="text-area-in-react" 
          onChange={this.changeHandler}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

然后是未反应的部分或外部部分。在这种情况下，放在index.html中的< script> 标记中

And then the non-react or external part. In this case placed in a <script> tag in index.html

<div id="root"></div>
<script>
  setTimeout(()=>{
    const textarea = document.querySelector('#text-area-in-react') 
    if(textarea){
      textarea.value = "This should be in state"

      const simChangeEvent = new Event('change', { 'bubbles': true });
      textarea.dispatchEvent(simChangeEvent);

     //when this runs I expect the react app to console.log the state, but it does not
    }
  }, 2000)
</script>

任何对此的见解将不胜感激。希望在那里的你们中的一个或多个会体会到疯狂，hacky的挑战。

Any insights into this would be appreciated. Hopefully one or more of you out there will appreciate a crazy, hacky challenge.

推荐答案

在研究完您的示例之后，我使它可以使用以下代码：

After playing around with your example, I made it work with this code:

const textarea = document.querySelector('#text-area-in-react')

var nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
nativeTextAreaValueSetter.call(textarea, 'This should be in state');

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

此答案很有帮助：
在React js中触发onchange事件的最佳方法是什么

这篇关于模拟更改事件以使用香草JS脚本将文本输入到React Textarea中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！