реагировать на встроенную функцию вызова из прослушивателя событий конструктора реквизита

Question

У меня есть прослушиватели событий на моих реквизитах

 constructor(props) {

    super(props);
    Tts.addEventListener("tts-start", event =>
        console.log("started"),
        this.setState({ ttsStatus: "started" })
        //how to call stopTTS
    ); ...}

, поэтому, если у меня есть функция вне конструктора

stopTTS() {
    console.log("cali");
}

, как вызвать функцию при срабатывании eventListener? ура

Answer 1

Как я уже упоминал в комментарии, вы можете вызывать методы класса внутри конструктора, как показано ниже.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
    window.addEventListener('click', (e) => {
      if (this.state.count > 4) {
        this.alertCount();
      }
    });
  }
  alertCount = () => {
    alert('count has become 5')
    this.setState({
      count: 0
    })
  }
  clickHandler = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return ( 
    <div >
      <div> 
      The count is now {this.state.count} 
      </div> 
      <button onClick = {
        this.clickHandler
      } id = "btn" > Click Me < /button> 
      </div >
    );
  }
}

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

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Первое: если можете, используйте вместо этого хуки.

Функциональный компонент, который может делать то, что вы хотите, может быть:

import React, { useEffect, useState } from 'react'

const Component = () => {
  const [ttsStatus, setTtsStatus] = useState('')

  const stopTTS = () => {
    console.log("cali");
  }

  // This useEffect will work as a componentDidMount
  useEffect(() => {
    Tts.addEventListener("tts-start", event => {
      console.log("started"),
      setTtsStatus("started")
      stopTTS() // You can call stopTTS here
    })
  }, [])

  return null
}

export default Component

Старайтесь избегать создания классов, React Hooks были новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса, поэтому вы можете использовать мощь класса в более чистой функции. Вы можете узнать об этом подробнее в https://reactjs.org/docs/hooks-overview.html