реагировать — как вызвать обработчик реагирования вручную из другого файла JavaScript?

Как вызвать обработчик реакции вручную из другого файла JavaScript?

Очевидно, что если у вас есть выбор, найдите другой способ решения основной проблемы, который не требует внешнего запуска обработчика событий. :-)

Единственный способ, который я нашел, это подключиться к событию DOM и переслать его в setTitle . Вот пример (см. В первую очередь комментарии *** ):

 class Title extends React.Component { constructor(props) { super(props); this.state = { title: "" }; // *** A ref so we can access the DOM element this.titleRef = React.createRef(); this.setTitle = this.setTitle.bind(this); } componentDidMount() { // ** Hook the input event on the DOM element if (this.titleRef.current) { this.titleRef.current.addEventListener("input", this.setTitle); } } componentWillUnmount() { // *** Release the input event on the DOM element if (this.titleRef.current) { this.titleRef.current.removeEventListener("input", this.setTitle); } } setTitle({target: {value: title}}) { // *** Update the title. Note that if the user types in the element and React // fires its event, you'll get two events (one from React, another from the DOM). // If you need to do something other than setting state in this method, check // first to see if the new title and the old are identical. But there's no need // if you're just calling `setState`, it will ignore an unnecessary state change. console.log(`setTitle: ${e.target.value}`); this.setState({title: e.target.value}); } render() { // *** Use the current title as the value, use the ref const {title} = this.state; return ({amp}lt;textarea id="example" ref={this.titleRef} className="parent" value={title} onChange={this.setTitle} /{amp}gt;); } } ReactDOM.render({amp}lt;Title/{amp}gt;, document.getElementById("root")); setTimeout(function() { const example = document.getElementById("example"); example.value = "updated"; example.dispatchEvent(new Event('change', { bubbles: true})); example.dispatchEvent(new Event('input', { bubbles: true})); }, 800); 
 {amp}lt;div id="root"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; 

Опять же, тем не менее, если вы сможете найти способ избежать необходимости запускать обработчик событий во-первых, это то, что я бы сделал.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector