Wolox React Chat Widget 在单击快速按钮后不会隐藏按钮

问题描述

我在我的 React 项目中使用 react-chat-widget 节点模块作为网络聊天，当我实现 setQuickButtons 时，即使单击按钮后按钮也不会隐藏。单击后如何隐藏按钮？

在 handleQuickButtonClicked 方法中，我设置了快速按钮，但即使单击其中一个按钮后，这些方法仍然停留在屏幕上。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { store } from './store';
import { Widget,addResponseMessage,addUserMessage,toggleWidget,setQuickButtons } from 'react-chat-widget';
import 'react-chat-widget/lib/styles.css';
import './index.css';
class Reactwidget extends React.Component {
    constructor(props) {
        super(props);

    }
    handleNewUserMessage(message) {
        console.log(message);
        if (message.includes('hi')) {
            addResponseMessage('Welcome to this test chatbot')

        }
    }
    handleQuickButtonClicked(message) {
        console.log('quick button clicked ' + message)
        if (message.includes('button') || message === 'button') {
            addUserMessage('you clicked button ' + message);
            addResponseMessage('hi')
        }
    }

    componentDidMount() {
        console.log('didmount')
        addResponseMessage('hello there')
        toggleWidget();
        const buttonList = [{
            label: 'Button1',value: 'button1'
        },{
            label: 'Button2',value: 'button2'
        },{
            label: 'Button3',value: 'button3'
        }];
        setQuickButtons(buttonList)
    }
    render() {
        return (
            <div>
                <Widget handleNewUserMessage={this.handleNewUserMessage}
                    title="Test webchat"
                    senderPlaceHolder="enter here"
                    showCloseButton={true}
                    showTimeStamp={true}
                    autofocus={true}
                    handleQuickButtonClicked={this.handleQuickButtonClicked}
                    toggleWidget={true}
                />
            </div>
        )
    }
}

ReactDOM.render(
    <React.StrictMode>
        <Reactwidget />
    </React.StrictMode>,document.getElementById('root')
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）