reactjs - 自动完成：如何用您自己的 react-select 元素替换 Webchat 的输入字段

Question

我有一个 React 应用程序，我想用我自己的选择元素替换网络聊天的输入栏（我正在使用 react-select）。

这是网络聊天下的选择元素：

return (
    <div className="WebChat" >
      <ReactWebChat //WebChat
        className={ `${ className || '' } web-chat` }
        directLine={ this.createDirectLine(token) }
        store={ store }
        styleSet={ styleSet } />
      <Select //my select element
        autoFocus="true"
        className="basic-single"
        classNamePrefix="select"
        defaultValue={'default'}
        isClearable={isClearable}
        isSearchable={isSearchable}
        name="Questions"
        options={groupedQuestions}
        closeMenuOnScroll= "true"
        placeholder="Example"
      />
     </div>
);

编辑感谢@tdurnford，这是我的实现：

网络聊天.js

import React from 'react'
import { createStore } from 'botframework-webchat'
import WebChatReact from './WebChatReact'
+import Searchbox from "./ImprovedSendBox"
+import setSendBox from "botframework-webchat-core/lib/actions/setSendBox";
+import submitSendBox from "botframework-webchat-core/lib/actions/submitSendBox";

import './WebChat.css'

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.handleFetchToken = this.handleFetchToken.bind(this);

    const store = createStore({}, ({ dispatch }) => next => action => {
      if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        dispatch({
         type: 'WEB_CHAT/SEND_EVENT',
         payload: {
           name: 'webchat/join',
           value: { }
         }
        });
        setTimeout(() => {
          dispatch({
            type: 'WEB_CHAT/SEND_MESSAGE',
            payload: { text:'Démarrer' }
          }
          );
        }, 1000);
      }
+      if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
+       this.setState({
+          searchValue: action.payload.text,
+        })
+      }
      return next(action);
    });

    this.state = {
      store,
      token: null,
+      searchValue: "",
+      searchSelection: "",
    };
  }

+  handleSearchInput = (e, { action }, store) => {
+    if (
+      action === "menu-close" ||
+      action === "input-blur" ||
+      action === "set-value"
+    ) {
+      return;
+    } else {
+      this.setState({ searchValue: e });
+    }
+    store.dispatch(setSendBox(e));
+  };

+  handleSearchSelection = (selection, store) => {
+    this.setState({
+      searchSelection: selection ? selection.label : "", //Clear Button à fix
+      searchValue: selection ? selection.label : ""
+    });
+    if (selection != null){
+      store.dispatch(setSendBox(selection.label));
+    }
+  };

  async handleFetchToken() {
    if (!this.state.token) {
      const res = await fetch('https://directline.botframework.com/v3/directline/conversations', {
      method: 'POST',
      headers: {
        "Authorization": "secret token ;)"
      }});
      const { token } = await res.json();
      this.setState(() => ({ token }));
    }
  }

  render() {
    const { state: {
      store,
      token,
+      searchValue,
+      searchSelection
    } } = this;


    return (
      <div className="WebChat">
        <WebChatReact
          className="react-web-chat"
          onFetchToken={ this.handleFetchToken }
          store={ store }
          token={ token }
        />

+        <form className="form-inline">
+          <Searchbox
+            className="select"
+            value={searchSelection}
+            onChange={e => this.handleSearchSelection(e, store)}
+            inputValue={searchValue}
+            onInputChange={(e, action) => this.handleSearchInput(e, action, store)}
+          />
+          <button
+            id="submit"
+            onClick={ event => {
+              event.preventDefault();
+              store.dispatch(submitSendBox())
+            }}
+          >
+            Submit
+          </button>
+        </form>
      </div>
    );
  }
}

改进的SendBox.js

可以在Github上找到

结果： 如果您有任何问题，请随时问我:)

标签： reactjsbotframeworkreact-selectweb-chat

Answer 1

不幸的是，目前没有简单的方法来替换 Web Chat 的文本输入，但 GitHub 上存在一个关于未来自定义发送框的可能性的问题。

尽管目前没有支持的方法来替换发送框，但无需分叉存储库的一种选择是隐藏发送框并在网络聊天下方呈现自定义发送框。但是，如果您采用这种方法，除了将 Web Chat 的存储绑定到组件状态之外，您还必须处理建议的操作、文件附件和语音功能。您还会失去很多网络聊天的样式选项。

如果这仍然是您想要追求的东西，这里有一些代码片段可以帮助您入门。

简单发送框

import React from 'react';
import setSendBox from "botframework-webchat-core/lib/actions/setSendBox";
import submitSendBox from "botframework-webchat-core/lib/actions/submitSendBox";


export default ({ store, value }) => (
  <div>
    <form>
      <input 
        onChange={ ({ target: { value }}) => store.dispatch(setSendBox(value)) } 
        placeholder="Type your message..." 
        value={ value }
      />
      <button 
        onClick={ event => {
          event.preventDefault();
          store.dispatch(submitSendBox())
        }} 
      >
        Submit
      </button>
    </form>
  </div>
)

应用程序

import React, { Component } from 'react';
import WebChat from './WebChat';
import SimpleSendBox from './SimpleSendBox'
import { createStore } from 'botframework-webchat';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      store: createStore({},
        () => next => action => {
          if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
            this.setState({ value: action.payload.text })
          }
          return next(action);
        }),
      value: ""
    }
  }

  render() {
    return (
    <>
      <WebChat store={ this.state.store } styleOptions={{ hideSendBox: true }} />
      <SimpleSendBox store={ this.state.store } value={ this.state.value }/>
    </>
    );
  }
}

export default App;

希望这可以帮助！