react-simple-chatbot NPM模块输入框无法启用的技术问询

嘿，我之前也碰到过这个情况！不用太纠结，输入框禁用大多是配置项没设置对，不需要手动去“启用”输入框本身，调整组件的配置就能搞定。

核心配置要点 #

react-simple-chatbot的输入框状态是由全局配置或者单步骤配置控制的，主要看这两个地方：

• 全局默认开启用户输入
  在<ChatBot>组件的props里设置userInput={true}，这会给所有步骤默认开启输入权限。如果你的全局配置里把这个设成了false，输入框就会一直处于禁用状态。

• 步骤级别的输入控制
  如果你只想在特定步骤允许用户输入，可以在对应的step对象里单独设置userInput属性：

  • 设为true：当前步骤允许用户输入
  • 设为false：当前步骤禁用输入框

示例代码 #

给你一个完整的配置示例，你可以参考调整：

import ChatBot from 'react-simple-chatbot';

// 定义聊天步骤
const chatSteps = [
  {
    id: 'greeting',
    message: '嗨！我是你的智能助手，有什么我能帮你的吗？',
    userInput: true, // 这个步骤允许用户输入
    trigger: 'next',
  },
  {
    id: 'next',
    message: '请告诉我你的需求~',
    trigger: 'final',
  },
  {
    id: 'final',
    userInput: true,
    end: true, // 结束对话，但依然允许用户输入最后一条消息
  },
];

function MainChatComponent() {
  return (
    <ChatBot
      steps={chatSteps}
      userInput={true} // 全局默认开启输入
      headerTitle="智能助手"
    />
  );
}

export default MainChatComponent;

常见排查点 #

如果按上面配置还是不行，你可以检查这两个地方：

• 有没有某个步骤不小心设置了userInput={false}，覆盖了全局配置
• 有没有自定义的输入组件（通过inputComponent props传入），导致原生输入框的状态被修改

内容的提问来源于stack exchange，提问作者mohd siraj