通过单击 ReactJS 中的 Material-UI 浮动操作按钮来切换 Dialogflow 聊天 Window

Question

在下面的代码片段中，我试图切换 <ChatWidget />，这是一个 Dialogflow 聊天 Window，当用户点击默认状态设置为false。单击 Material-UI 浮动操作按钮时，它不会将状态切换为 true。我正在使用 Material UI v1.0.0-beta34。这是代码片段：

import React, { Component } from 'react';
import ChatWidget from './ChatWidget';
import FloatingActionButton from './Fab';
class ChatComponent extends Component {
constructor( props ){
  super( props )
  this.state = { show : false };
  this.toggleDiv = this.toggleDiv.bind(this)
 }
toggleDiv = () => {
  const { show } = this.state;
  this.setState( { show : !show } )
}
render() {
  return (
  <div>
    <div>
      { this.state.show && <ChatWidget /> }
    </div>
  <FloatingActionButton onClick={ this.toggleDiv } />
  </div>
   );
  }
 }
 export default ChatComponent;

没有点击 FAB 的页面是这样的：

单击 FAB 时所需的功能如下所示：

非常感谢任何有关在单击 <FloatingActionButton /> 时切换 <ChatWidget /> 的正确方法的帮助或建议。

Answer 1

我找到了解决方案。问题是 <FloatingActionButton /> 是我制作的自定义组件。如果我必须让 FloatingActionButton 响应点击，我必须在 Material UI <Button/> 组件本身中添加 OnClick 属性。有效的修改代码：

import React, { Component } from 'react';
import ChatWidget from './ChatWidget';
import Button from 'material-ui/Button';
const style = {
 margin: 0,
 top: 'auto',
 right: 20,
 bottom: 20,
 left: 'auto',
 position: 'fixed',
 backgroundColor:'#E65100',
 color:'#FFFFFF',
};

  class ChatComponent extends Component {
   constructor( props ){
    super( props )
    this.state = { show : false };

    this.toggleDiv = this.toggleDiv.bind(this)
   }

   toggleDiv = () => {
    const { show } = this.state;
    this.setState( { show : !show } )
  }
  render() {
    return (
    <div>
      <div>
       { this.state.show && <ChatWidget /> }
      </div>
     <Button variant="fab" aria-label="add" style={style} onClick={ 
      this.toggleDiv } >
    <i class="fas fa-comment"></i>
     </Button>
     </div>
     );
   }
  }
  export default ChatComponent;

通过单击 ReactJS 中的 Material-UI 浮动操作按钮来切换 Dialogflow 聊天 Window

Toggling a Dialogflow Chat Window by clicking on a Material-UI Floating Action Button in ReactJS

javascript

reactjs

material-ui

api-ai

dialogflow-es