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

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

该<textarea>有一个id分配ATTR，这样我就可以查询它并设置其.value足够容易。然而，我的真正目标是影响react 应用程序的状态，也就是说，使用文本区域的绑定onChange处理程序使我的字符串进入呈现文本区域的组件的状态。

到目前为止，我已尝试首先：设置<textarea>. 第二：触发“更改”事件。但到目前为止，这并没有触发onChange回调。

为了让您了解我实际上在谈论什么，我创建了这个挑战的最小示例。

这是该堆栈闪电战中的代码：

react部分。 这代表我无法控制的react应用程序。

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'));

然后是非react或外部部分。 在这种情况下放置<script>在 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>

对此的任何见解将不胜感激。希望你们中的一个或多个人会喜欢一个疯狂的、骇人听闻的挑战。