मेरे पास मेरे घटकों में से एक के अंदर ट्रांसक्रिप्ट नामक एक प्रोप है। जब मैं एक आवाज आशय बोलता हूं तो यह अपडेट हो जाता है। मैं किसी भी समय एक फ़ंक्शन चलाने के लिए चाहता हूं जो ट्रांसक्रिप्ट में तर्क के रूप में बदलता है

यहां मैं उस अवधि के अंदर एक ऑन चेंज = {} फ़ंक्शन करने की कोशिश कर रहा हूं जिसमें मैंने प्रतिलेख लोड किया है लेकिन मुझे पता है कि यह विधि काम नहीं करेगी, यह समझाने का सबसे आसान तरीका था कि मैं क्या हासिल करना चाहता था


import React, { Component } from "react";
import SpeechRecognition from "react-speech-recognition";
import { Button } from 'react-bootstrap';


class Dictaphone extends Component {

highlightOnRead=(transcript, cursor)=>{

         console.log("transcript",transcript)
         console.log("cursor",cursor.anchorNode.parentNode.id) //we only need the word

         if(transcript.includes(" ")){
           transcript = transcript.split(" ").pop()
         }
         if(transcript = cursor.textContent.toLowerCase()){
             cursor.style.backgroundColor = 'yellow'; //highlight the span matching the intent
         }
         cursor = document.getElementById(cursor.anchorNode.parentNode.id).nextSibling.nextElementSibling;
               return cursor
     };



  render() {
   const {transcript, resetTranscript, browserSupportsSpeechRecognition} = this.props
    var cursor=''

    if (!browserSupportsSpeechRecognition) {
      return null
    }
    if(transcript==="notes"||transcript==="cards"||transcript==="home"|| transcript==="settings" || transcript==="read document"){
      this.libraryOfIntents(transcript,resetTranscript);
    }

    return (
      <div>
        <span id="transcriptSpan"className="transcriptspan" onChange={()=>{

          if(this.props.readAlongHighlightState===true){
            if(cursor===''){
              this.highlightOnRead(transcript,window.getSelection())
            }else{
                this.highlightOnRead(transcript,cursor)
            }
          }
        }}> {transcript}  </span>
        <Button variant="outline-dark" onClick={resetTranscript}>Reset</Button>
      </div>
    )
  }
}

export default SpeechRecognition(Dictaphone)
0
monsterpiece 22 अक्टूबर 2019, 19:35

1 उत्तर

सबसे बढ़िया उत्तर

आप componentDidUpdate नामक जीवनचक्र विधि का उपयोग कर सकते हैं

componentDidUpdate(prevProps) {
  if (this.props.transcript !== prevProps.transcript) { // check if your props is changed
   // Make your function call here
  }
}
0
Ozan Bulut 22 अक्टूबर 2019, 17:55