通过单击ReactJS中的材质UI浮动操作按钮切换Dialogflow聊天窗口

我找到了解决办法。问题是 <FloatingActionButton /> 是我制作的自定义组件。如果必须使FloatingActionButton响应单击,则必须在材质UI中添加OnClick属性 <Button/> 组件本身。 有效的修改代码:

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;