当点击一个图标时,会出现一个带有表单的对话框,可以添加选项卡,也可以删除特定的选项卡。我已经为组件使用了reactjs、redux和material ui。我可以在点击图标时显示对话框,但我得到了的错误
应为
Dialog
提供类型为function
的无效道具open
对话框中的boolean
对话框打开时出现上述错误,当我单击关闭按钮时,没有发生任何事情。
我该怎么解决它?
这是我的代码
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
open={props.handleOpen}
close={props.handleClose}
/>
</div>
);
TabDialog.js
class TabDialog extends Component {
renderAddTab() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.props.close}
/>,
<FlatButton
label="Add Tab"
primary
keyboardFocused
onTouchTap={this.props.close}
/>,
];
return (
<div className="device-action">
<Dialog
title="Add a Tab"
actions={actions}
modal={false}
open={this.props.open}
onRequestClose={this.props.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.close}
/>,
<FlatButton
label="Delete"
primary
keyboardFocused
onTouchTap={this.props.close}
/>,
];
return (
<div className="tab-action">
<Dialog
title="Delete"
actions={actions}
modal={false}
open={this.props.open}
onRequestClose={this.props.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);
}
冗余部件
export function selectTabIcon(selectTab) {
console.log('selected', selectTab.target.id);
return {
type: 'TAB_ICON_SELECTED',
payload: selectTab.target.id,
};
}
switch (action.type) {
case 'TAB_ICON_SELECTED':
console.log('tab', action.payload);
return action.payload;
更新:
对话框打开道具接受布尔值和onRequestClose,onTouchTap接受函数,所以我做了以下操作,但关闭现在不起作用
将我的selectTabIcon功能更改为
export function selectTabIcon(selectTab) {
return {
type: 'TAB_ICON_SELECTED',
id: selectTab.target.id,
open: true,
close: () => false
};
}
在Dialog中,我在onRequestClose和onTouchTap上传递了this.props.createTab.close,但运气不佳。
http://www.material-ui.com/#/components/dialog
,对话框的open
道具应为布尔值。
所以希望你的代码片段能帮助你:
class App extends Component {
constructor(props) {
super(props);
this.state = {
max_char: 32,
};
this.handleChange = this.handleChange.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}
render() {
return (
<div>
<Header tab={this.state.tabs} />
<Content />
</div>
);
}
}
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);
}
class TabDialog extends Component {
constructor(props) {
super(props);
this.state = {
open: false
}
this.handleOpen = this.handleOpen.bind(this)
this.handleClose = this.handleClose.bind(this)
}
handleOpen = () => {
this.setState({ open: true });
}
handleClose = () => {
this.setState({ open: false });
}
renderAddTab() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Add Tab"
primary
keyboardFocused
onTouchTap={this.handleClose}
/>,
];
return (
<div className="device-action">
<Dialog
title="Add a Tab"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
<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.handleClose}
/>,
<FlatButton
label="Delete"
primary
keyboardFocused
onTouchTap={this.handleClose}
/>,
];
return (
<div className="tab-action">
<Dialog
title="Delete"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
/>
</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);
}
我怀疑FlatButton上的onTouchTap
道具集,而且没有将redux存储连接到组件的连接方法
<Content handleOpen={this.handleOpen()}
handleClose={this.handleClose()}
/>