想要在单击 IconFont 后打开一个对话框 window

Question

我正在使用 React，对它还很陌生。我有一个包含一堆 FontIcons 的页面。我希望用户单击一个图标并弹出一个对话框。我在对话框 http://www.material-ui.com/#/components/dialog 上找到了信息。我还没有找到任何关于如何使 onclick 动作呈现对话框组件的信息。

我知道我需要在这里添加一些东西..

<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>

Answer 1

您需要自己创建对话框组件，然后在单击 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>
    );
  }
}

想要在单击 IconFont 后打开一个对话框 window

Would like a dialog window to open once IconFont is clicked

javascript

icons

action

onclick

reactjs