文本字段的反应语音识别

Question

Im trying to make react-speech-recognition write inside a text-field but for some reason it wont work. I think it has to do with the last line.

import React from 'react';

import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';
import CircularProgress from '@material-ui/core/CircularProgress';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Grid from '@material-ui/core/Grid';

import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import InputLabel from '@material-ui/core/InputLabel';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

// import EventIcon from '@material-ui/icons/Event';
import SearchIcon from '@material-ui/icons/Search';
// import TodayIcon from '@material-ui/icons/Today';

import InputUnstyled from '@mui/base/InputUnstyled';

const Dictaphone = () => {
    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    if (!browserSupportsSpeechRecognition) {
        return <span>Browser doesn't support speech recognition.</span>;
    }

    return (
        <div>
            <p>Microphone: {listening ? 'on' : 'off'}</p>
            <button onClick={SpeechRecognition.startListening}>Start</button>
            <button onClick={SpeechRecognition.stopListening}>Stop</button>
            <button onClick={resetTranscript}>Reset</button>
            <p>{transcript}</p>
        </div>
    );
};

function updateInput(ish) {
    document.setSearchField = "Rendering";
}

function SearchForm({ runSearch, setSearchField, setAuthorField, setVenue, setBeginDate, setEndDate, setShowGraph, show_loading }) {
    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    return (

        <Grid container spacing={2}>
            <Grid item xs={1} />
            <Grid item xs={10}>
                <Paper elevation={2}>
                    <div className="search-body">
                        <form onSubmit={runSearch}>
                            <Grid container spacing={2}>
                                <Grid item xs={12}>

                                    <div>
                                        <p>Microphone: {listening ? 'on' : 'off'}</p>
                                        <button onClick={SpeechRecognition.startListening}>Start</button>
                                        <button onClick={SpeechRecognition.stopListening}>Stop</button>
                                        <button onClick={resetTranscript}>Reset</button>
                                        <p>{transcript}</p>
                                    </div>

                                    <TextField
                                        id="busca" label="Palavras-chave *"
                                        type='text'
                                        placeholder={transcript}
                                        name='q'
                                        variant="outlined"
                                        fullWidth
                                        InputProps={{
                                            endAdornment: <SearchIcon />
                                        }}
                                        InputLabelProps={{
                                            shrink: true

                                        }}
                                        onChange={setSearchField} />

I tried using value={transcript} in the text-field but it only will work after i write something after it. Example: i say "hello", it will write it in the text-field but it wont actually send "hello" until i write something with the keyboard after like "1". then it will send "hello1".

<TextField
    id="busca" label="Palavras-chave *"
    type='text'
    value={transcript}
    placeholder={transcript}
    name='q'
    variant="outlined"
    fullWidth
    InputProps={{
        endAdornment: <SearchIcon />
    }}
    InputLabelProps={{
        shrink: true

    }}
    onChange={setSearchField} />

Answer 1

I think it might work if you replace TextField with textarea including value={transcript} for the same.