ReactJS中如何将语音识别结果传入文本框并编辑及查看控制台值

你的核心问题是TextField的数据源不一致：当前value绑定的是语音识别的transcript，但onChange更新的是story状态，导致输入无法同步到视图；同时代码存在语法错误（return语句在函数外、onClick语法错误），导致组件无法正常工作。

以下是修正后的完整代码，实现「语音识别结果填充TextField + 支持手动编辑 + 正常获取输入值」的需求：

import React, { useState, useEffect } from "react";
import TextField from "@mui/material/TextField";
import { Grid, IconButton } from "@mui/material";
import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
import MicIcon from "@mui/icons-material/Mic";
import StopIcon from "@mui/icons-material/Stop";
import ClearIcon from "@mui/icons-material/Clear";

const AddDream = () => {
  const [story, setStory] = useState("");

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

  // 监听语音识别结果，同步到本地状态
  useEffect(() => {
    if (transcript) {
      setStory(transcript);
    }
  }, [transcript]);

  if (!browserSupportsSpeechRecognition) {
    return <span>浏览器不支持语音识别功能</span>;
  }

  const toggleListening = () => {
    listening ? SpeechRecognition.stopListening() : SpeechRecognition.startListening({ continuous: true });
  };

  const clearContent = () => {
    resetTranscript();
    setStory("");
  };

  return (
    <Grid container spacing={2} alignItems="flex-start">
      <Grid item xs={11}>
        <TextField
          label="梦境故事"
          multiline
          rows={5}
          fullWidth
          value={story}
          onChange={(e) => setStory(e.target.value)}
          placeholder="语音输入或手动编辑你的梦境内容"
        />
      </Grid>
      <Grid item xs={1} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <p>{listening ? "麦克风开启" : "麦克风关闭"}</p>
        <IconButton color={listening ? "error" : "primary"} onClick={toggleListening}>
          {listening ? <StopIcon /> : <MicIcon />}
        </IconButton>
        <IconButton color="secondary" onClick={clearContent}>
          <ClearIcon />
        </IconButton>
      </Grid>
    </Grid>
  );
};

export default AddDream;

关键修改说明 #

1. 统一数据源：TextField的value绑定本地状态story，onChange同步更新story，确保输入和视图双向绑定，支持手动编辑。
2. 同步语音识别结果：通过useEffect监听transcript变化，将语音识别结果自动同步到story状态，实现语音输入填充文本框。
3. 修复语法错误：将return语句移至组件函数内部，修正IconButton的onClick语法，添加箭头函数包裹调用逻辑。
4. 优化交互体验：添加麦克风开关切换逻辑、清空内容按钮，提升用户操作流畅度。

内容的提问来源于stack exchange，提问作者Shashimal Kawinda Wanninayake