想要一个对话窗口打开一次IconFont被点击
问题描述:
我正在使用React,并且对它很新颖。我有一个包含一堆FontIcons的页面。我希望用户点击一个图标并弹出一个对话框。我在对话框中找到了信息http://www.material-ui.com/#/components/dialog。我还没有找到关于如何使onclick动作渲染对话框组件的任何信息。想要一个对话窗口打开一次IconFont被点击
我知道我需要在这里添加东西..
<a style={{position: 'absolute', bottom: 0, right: 0, cursor: 'pointer'}} onTouchTap={() => manageBookmark(parsedParams, this.props.documentRdxDoc.acm, this.props.documentRdxDoc.docTitle)}>
<Tooltip label='Manage Bookmark' position='right'>
<FontIcon className='material-icons' style={{color:
appConfig.globalFontColor}} tooltip="Notifications">star</FontIcon>
</Tooltip>
</a>
答
您需要创建对话框组件本身,然后显示它被点击的FontIcon时(使用onClick
属性)。
可以使用组件状态对象跟踪对话状态并通过处理程序方法修改对话状态。
下面是基于文件的网站的例子:
export default class DialogButtonSample extends React.Component {
state = {
open: false,
};
handleOpen =() => {
this.setState({open: true});
};
handleClose =() => {
this.setState({open: false});
};
render() {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onClick={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
disabled={true}
onClick={this.handleClose}
/>,
];
return (
<div>
<a style={{position: 'absolute', bottom: 0, right: 0, cursor: 'pointer'}} onTouchTap={() => manageBookmark(parsedParams, this.props.documentRdxDoc.acm, this.props.documentRdxDoc.docTitle)}>
<Tooltip label='Manage Bookmark' position='right'>
<FontIcon className='material-icons' style={{color: appConfig.globalFontColor}} tooltip="Notifications" onClick={this.handleOpen}>star</FontIcon>
</Tooltip>
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
</a>
</div>
);
}
}
下面有没有工作的答案吗?如果你能提供反馈意见,这将是一件好事。 –
哦,我的坏。是的,但我使用的React无法识别handleOpen =()=> {所以我必须使它处理Open(),并在我想调用它时绑定状态。 – SunLightGirl99