import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import {} from "@fortawesome/free-solid-svg-icons";
import { Box, Chip, Grid, Typography } from "@mui/material";
import VoiceRecognice from "../component/VoiceRecognice";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import IconButton from "@mui/material/IconButton";
import MicIcon from "@mui/icons-material/Mic";

const addDream = () => {
  const [story, setStory] = useState("");
  console.log(story);

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

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

return (
  <>
    <Grid item xs={11}>
      <TextField
        label="Dream story"
        multiline
        rows={5}
        fullWidth
        value={transcript}
        onChange={(e) => setStory(e.target.value)}
      />
    </Grid>
    <Grid item xs={1}>
      <p>{listening ? "Mic On" : "Mic Off"}</p>
      <IconButton color="primary" onClick{SpeechRecognition.startListening}>
        <MicIcon />
      </IconButton>
    </Grid>
  </>
);
export default AddDream;

我想将浏览器支持语音识别值设置为TextField值。我想编辑该语音识别值。在我的代码中，没有编辑值，也没有获得输入值。但transcript值显示在TextField中。