javascript - 通过单击 ReactJS 中的 Material-UI float 操作按钮来切换 Dialogflow 聊天窗口

Question

在下面的代码片段中，我尝试切换 <ChatWidget /> ，这是一个 Dialogflow 聊天窗口，当用户单击 <FloatingActionButton/> 时默认状态设置为false 。单击 Material-UI float 操作按钮时，它不会将状态切换为 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 时所需的功能如下所示:

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

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;