时间戳

首页 > 解决方案 > 使用 vanilla js 脚本模拟更改事件以将文本输入到 react textarea 中

javascript - 使用 vanilla js 脚本模拟更改事件以将文本输入到 react textarea 中

问题描述

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

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

有<textarea>一个attr 分配，所以我可以很容易地id查询和设置它。然而，我真正的目的是影响反应应用程序的状态，也就是说，使用文本区域的绑定处理程序将我的字符串变为呈现文本区域的组件的状态。.valueonChange

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

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

这是来自stackblitz的代码：

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

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

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

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

标签： javascriptreactjsdom-events

解决方案

在玩弄了您的示例之后，我使用以下代码使其工作：

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

这个答案有很大帮助： What is the best way to trigger onchange event in react js

推荐阅读