如何从另一个javascript文件手动调用react处理程序？

如何从另一个javascript文件手动调用react处理程序

import './external/myPlugin'
class Title extends Component {
    @autobind
    setTitle(e) {
        // do something
    }

    render() {
        return (<Textarea className="parent" value="default" onChange={this.setTitle} />);
    }
}

如何调用“handleChangeTitle”函数

//我试过这个。但它不起作用

titleElement.dispatchEvent(new Event('change', { bubbles: true}));
titleElement.dispatchEvent(new Event('input', { bubbles: true}));
titleElement.dispatchEvent(new Event('textarea', { bubbles: true}));

---

显然，如果您有任何选择，可以找到一种不同的方法来解决根本问题，而不需要从外部触发事件处理程序。：-）

我找到的唯一方法是挂接DOM事件并将其转发到

setTitle

。下面是一个示例（请参见

***

注释）：

类标题扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“
};
//***一个ref，这样我们就可以访问DOM元素
this.titleRef=React.createRef（）；
this.setTitle=this.setTitle.bind（this）；
}
componentDidMount（）{
//**钩住DOM元素上的输入事件
如果（此标题引用当前）{
this.titleRef.current.addEventListener（“输入”，this.setTitle）；
}
}
组件将卸载（）{
//***释放DOM元素上的输入事件
如果（此标题引用当前）{
this.titleRef.current.removeEventListener（“输入”，this.setTitle）；
}
}
setTitle（{target:{value:title}}）{
//***更新标题。请注意，如果用户在元素中键入
//激发它的事件，您将获得两个事件（一个来自React，另一个来自DOM）。
//如果您需要执行此方法中设置状态以外的操作，请选中
//首先看看新标题和旧标题是否相同。但是没有必要
//如果您只是调用'setState'，它将忽略不必要的状态更改。
log（`setTitle:${e.target.value}`）；
this.setState（{title:e.target.value}）；
}
render（）{
//***使用当前标题作为值，使用参考
const{title}=this.state；
返回（）；
}
}
render（，document.getElementById（“根”））；
setTimeout（函数（）{
const example=document.getElementById（“示例”）；
example.value=“updated”；
dispatchEvent（新事件（'change'，{bubbles:true}））；
dispatchEvent（新事件（'input'，{bubbles:true}））；
}, 800);

在您的代码中根本没有名为
handleChangeTitle
的函数……显然，如果可以，您希望避免这样做。：-）FWIW，我可以确认上面的方法不适用于DOM
textarea
（不知道上面的
textarea
是什么，但它可能有相同的问题）：DOM处理程序会被触发，而不是React处理程序。是的，React通过某种包装器处理事件，所以这不起作用。不管怎样，@kokojustin，你到底想达到什么目的？
titleElement.dispatchEvent(new Event('change', { bubbles: true}));
titleElement.dispatchEvent(new Event('input', { bubbles: true}));
titleElement.dispatchEvent(new Event('textarea', { bubbles: true}));