关闭请求在对话框上不起作用 [英] close request is not working on dialog box
问题描述
单击图标时,将出现一个带有窗体的对话框,以添加一个选项卡或删除特定的选项卡.我已经使用了reactjs,redux和material-ui作为组件. 单击图标时可以显示对话框,但是当我单击取消"按钮时,对话框不会关闭.
When an icon is clicked, a dialog box with form should appear to either add a tab or delete specific tab. I have used reactjs, redux and material-ui for components. I could show the dialog box when icon is clicked but when i click on cancel button, dialog box does not get close.
我应该怎么解决?
这是我的代码
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
max_char: 32,
open: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}
handleClose = () => this.setState({ open: false });
handleOpen = () => this.setState({ open: true });
render() {
return (
<div>
<Header
tab={this.state.tabs}
open={this.state.open}
handleClose={this.handleClose}
handleToggle={this.handleToggle}
/>
<Content
handleOpen={this.handleOpen}
handleClose={this.handleClose}
/>
</div>
);
}
}
Header.js
class Header extends Component {
render() {
const tabs = _.map(this.props.tab, (tab) =>
<span className="tab" key={tab.id}><a href="">{tab.description}</a></span>
);
return (
<div>
<AppBar
title={tabs}
iconElementRight={navigation}
onLeftIconButtonTouchTap={this.props.handleToggle}
style={{ background: '#fff' }}
/>
</div>
);
}
}
function mapStateToProps(state) {
return {
iconList: state.iconList
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
selectTabIcon
}, dispatch);
}
const Content = (props) =>
(
<div className="content-section">
<TabDialog />
</div>
);
TabDialog.js
class TabDialog extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
renderAddTab() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.props.createTab.close}
/>,
<FlatButton
label="Add Tab"
primary
keyboardFocused
onTouchTap={this.props.createTab.close}
/>,
];
return (
<div className="device-action">
<Dialog
title="Add a Tab"
actions={actions}
modal={false}
open={this.props.createTab.open}
onRequestClose={this.props.createTab.close}
>
<div className="tab-name">
<TextField
floatingLabelText="Name"
floatingLabelStyle={{ color: '#1ab394' }}
floatingLabelFocusStyle={{ color: '#1db4c2' }}
underlineStyle={{ borderColor: '#1ab394' }}
/>
</Dialog>
</div>
);
}
renderDeleteTab() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.props.createTab.close}
/>,
<FlatButton
label="Delete"
primary
keyboardFocused
onTouchTap={this.props.createTab.close}
/>,
];
return (
<div className="tab-action">
<Dialog
title="Delete"
actions={actions}
modal={false}
open={this.props.createTab.open}
onRequestClose={this.props.createTab.close} />
</div>
);
}
render() {
const iconSelected = this.props.createTab;
if (!iconSelected) {
return (<div>Select</div>);
}
if (iconSelected === '1') {
return (this.renderDeleteTab());
}
if (iconSelected === '2') {
return (this.renderAddTab());
}
}
}
function mapStateToProps(state) {
return {
iconList: state.iconList,
createTab: state.createTab,
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
addTab,
selectTabIcon
}, dispatch);
}
redux部分
export function selectTabIcon(selectTab) {
console.log('selected', selectTab.target.id);
return {
type: 'TAB_ICON_SELECTED',
id: selectTab.target.id,
open: true,
close: () => false
};
}
switch (action.type) {
case 'TAB_ICON_SELECTED':
console.log('tab', action);
return action;
open道具接受boolean和onRequestClose,而onTouchTap道具接受功能.
open props accept boolean and onRequestClose and onTouchTap props accepts function.
为什么我的代码不起作用?我该如何克服这个问题?
Why is my code not working? How can i overcome this issue?
推荐答案
我找到了解决方案. onRequestClose和onTouchTap都接受功能.他们需要开放才能虚假.我失败的原因是我传递了错误的值来关闭标志,而不是打开.
I found the solution. onRequestClose and onTouchTap both accepts function. They need open to be false. Why i failed is i passed false value to close flag instead to open.
现在,我创建了一个新的动作创建器,在该动作创建器中,我通过将打开的有效载荷设置为false来关闭该动作的动作
Now i have created a new action creator where i have passed an action to close it by setting open payload to false
export function closeTabIcon() {
return {
type: 'CLOSE_ICON',
open: false
}
}
reducer will be something like this
case 'CLOSE_ICON':
return action.open
现在在OnRequestProps中,我通过了this.props.closetabIcon.
Now in the OnRequestProps i passed this.props.closetabIcon.
这篇关于关闭请求在对话框上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!