单击图标时,应显示带有表单的对话框,以添加选项卡或删除特定选项卡。我已经将reactjs,redux和material-ui用于组件。 单击图标时我可以显示对话框但是当我点击取消按钮时,对话框不会关闭。
我该怎么做才能解决它?
这是我的代码
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 props accept boolean and onRequestClose和onTouchTap props接受函数。
为什么我的代码不起作用?我怎样才能克服这个问题?
答案 0 :(得分:0)
onRequestClose
的{{1}}支柱需要Dialog
而不是function
。因此,您需要在该函数中将boolean
的值更改为this.props.createTab.open
。这样,状态将由redux更改,false
的值将作为open
传递。这将关闭对话框。
答案 1 :(得分:0)
我找到了解决方案。 onRequestClose和onTouchTap都接受函数。他们需要开放是假的。为什么我失败了我传递假值来关闭旗帜而不是打开。
现在我已经创建了一个新的动作创建器,我通过将open payload设置为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。