提供给“Dialog”的“function”类型的道具“open”无效
Invalid prop `open` of type `function` supplied to `Dialog`
当点击一个图标时,会出现一个带有表单的对话框,可以添加选项卡,也可以删除特定的选项卡。我已经为组件使用了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存储连接到组件的连接方法
对话框的"open"道具是一个bool。您需要传递"handleOpen"函数的结果,而不是函数本身的引用。添加这样的parens:
<Content handleOpen={this.handleOpen()}
handleClose={this.handleClose()}
/>
相关文章:
- 直接下载文件,而不是从window.open(url)
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- 如何将PDF作为二进制文件传递到window.open()
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 为什么window.open不打开一个以变量形式给出的链接
- 这个问号在Flow中意味着什么:“;?()=>“无效”;
- 从字符串末尾删除空白无效
- Jquery Datatables错误:无效的JSON基元:draw
- 滚动在Chrome中有效,但在Firefox或IE中无效
- 如何在`window.open`之后执行回调
- 错误:语法错误,无法识别的表达式:不支持的伪:无效/RectJS/Unit Testing
- Windows.Open 在 window.Location 工作时不起作用
- Javascript setattribute-名称和值无效
- 在page.open()-PhantomJS中无法访问全局变量
- javascript window.open将无法在Chrome控制台上工作
- window.open 在 IE 中抛出无效参数错误
- 提供给“Dialog”的“function”类型的道具“open”无效
- 在IE9地址栏中粘贴/输入URL有效,但在href或window.open中无效
- 为什么会得到无效参数?IE8出现错误?(window.open)