在下面的代码片段中,我尝试切换 <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 />
非常感谢。
最佳答案
我找到了解决方案。问题是<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;
关于javascript - 通过单击 ReactJS 中的 Material-UI float 操作按钮来切换 Dialogflow 聊天窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48849003/