React Speech Recognition - 通过更新状态将文本插入内存

Question

有一个类似的问题，但我不能评论它，所以我打开一个新的。我是 React 的新手，并尝试为我的应用程序实现 React SpeechRecognition 组件。文本应位于输入框中。它的代码（来自 React 文档 [https://www.npmjs.com/package/react-speech-recognition][1] - 使用 span 标签而不是输入）：

import React, { PropTypes, Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'
    
const propTypes = {
  // Props injected by SpeechRecognition
  transcript: PropTypes.string,
  resetTranscript: PropTypes.func,
  browserSupportsSpeechRecognition: PropTypes.bool
}

class Dictaphone extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <span>{transcript}</span>
      </div>
    )
  }
}

Dictaphone.propTypes = propTypes

export default SpeechRecognition(Dictaphone)

现在我尝试通过成绩单（已经识别的单词）更新文本（字符串）的状态，但我做不到。在之前的一个问题中，有人提出了这个建议：

<input 
  type="text" 
  value={transcript}
  onChange={event => this.onInputChange(event.target.value)}
/>

现在我说话的时候，确实能看到输入框里的字，所以最终代码应该是：

import React, { Component } from "react";
import PropTypes from "prop-types";
import SpeechRecognition from "react-speech-recognition";

const propTypes = {
  // Props injected by SpeechRecognition
  transcript: PropTypes.string,
  resetTranscript: PropTypes.func,
  browserSupportsSpeechRecognition: PropTypes.bool
};

class Dictaphone extends Component {
  constructor() {
      super();
      this.state = {
         text: '',
         events: []
      }
    }

  onInputChange = (event) => {
    console.log (event.target.value);
    this.setState( {text: event.target.value} );
  }

  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props;
    
    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <input 
          className='bg-light-blue'
          type="text" 
          value={transcript} 
          onChange={event => this.onInputChange(event.target.value)}
        />     
     </div>
    )
  }
}

Dictaphone.propTypes = propTypes;

export default SpeechRecognition(Dictaphone);

但是当我 console.log(event.target.value) 这是文本时 - 我什么也没看到，所以我做错了什么。请注意，如果我只是在渲染函数中写入：

render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props;
    var x = transcript;
    console.log('x is ',x);
    console.log('x length is: ',x.length);
.....

它确实控制了文字记录 (x)，但这不是我想要的 - 我需要通过更新状态将其保存在文本中。

有什么建议吗？

Answer 1

如果您需要在您所在的州存储成绩单道具，您应该这样做。

   componentDidUpdate(prevProps){
     if(prevProps.transcript !== this.props.transcript){
       this.setState({
         text: this.props.transcript
       });
     }
   }

在您的渲染方法中使用 this.state.text 在输入值中显示。同样在你的构造函数中做

this.state = {
  text: props.transcript
}

React Speech Recognition - 通过更新状态将文本插入内存

React Speech Recognition - inserting the text to the memory by updating the state

state

speech-recognition

reactjs