React中WebChat输入框值为空及Azure Speech聚焦问题求助

问题1：按下Enter键时const message始终为空 #

核心原因及解决思路 #

1. WebChat自动清空输入框的时机冲突
   按下Enter发送消息时，WebChat内部会立刻清空输入框，导致你此时通过ref获取的值已经是空的。

• 替代方案：通过WebChat的store订阅输入框内容变化，提前缓存输入值

  import { useWebChat } from 'botframework-webchat-react';
  
  function ChatComponent() {
    const { store } = useWebChat();
    const [inputValue, setInputValue] = useState('');
  
    useEffect(() => {
      // 订阅store，实时获取输入框内容
      const unsubscribe = store.subscribe(() => {
        const state = store.getState();
        setInputValue(state.webChat.inputBox.value);
      });
      return unsubscribe;
    }, [store]);
  
    const handleKeyDown = (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        // 直接用提前缓存的inputValue，而非实时从ref拿
        const message = inputValue;
        if (message) {
          // 执行你的消息处理逻辑
          console.log('发送的消息：', message);
        }
      }
    };
  
    return <WebChat onKeyDown={handleKeyDown} />;
  }
  

• 若坚持用ref获取：先阻止WebChat默认的清空行为，拿到值后再手动处理

  const webChatRef = useRef(null);
  
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault(); // 阻止WebChat默认的发送清空逻辑
      const inputElement = webChatRef.current?.querySelector('input.webchat__text-input');
      const message = inputElement?.value;
      if (message) {
        // 手动调用发送接口
        directLine.postActivity({ type: 'message', text: message });
        inputElement.value = ''; // 手动清空输入框
      }
    }
  };
  

2. ref未定位到正确的输入框元素
   WebChat的输入框嵌套较深，不同版本的class名称可能不同（比如新版用webchat__text-input，旧版用wc-textbox）。

• 解决：打开浏览器开发者工具，找到输入框的准确class或选择器，再调整ref的查询逻辑。

问题2：点击stop按钮后输入框无法立即获得焦点 #

核心原因及解决思路 #

1. 语音识别的异步逻辑阻塞聚焦
   停止语音识别的操作是异步的，直接在stop按钮点击事件里执行聚焦，可能DOM还没处于可交互状态。

• 解决：将聚焦操作放在语音识别停止的回调里，或用setTimeout确保DOM更新完成

  const handleStopSpeech = async () => {
    await speechRecognizer.stopContinuousRecognitionAsync();
    const inputElement = webChatRef.current?.querySelector('input.webchat__text-input');
    if (inputElement) {
      // 延迟执行聚焦，确保异步逻辑完成
      setTimeout(() => inputElement.focus(), 0);
    }
  };
  

2. 输入框可能被临时禁用
   语音识别过程中，WebChat可能会给输入框添加disabled属性，停止后需要先解除禁用再聚焦

const handleStopSpeech = async () => {
  await speechRecognizer.stopContinuousRecognitionAsync();
  const inputElement = webChatRef.current?.querySelector('input.webchat__text-input');
  if (inputElement) {
    inputElement.disabled = false;
    inputElement.focus();
  }
};

内容的提问来源于stack exchange，提问作者Charger-Ang