想要一個對話窗口打開一次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>

來源

2017-10-10 SunLightGirl99

下面有沒有工作的答案嗎？如果你能提供反饋意見，這將是一件好事。 –

哦，我的壞。是的，但我使用的React無法識別handleOpen =（）=> {所以我必須使它處理Open（），並在我想調用它時綁定狀態。 – SunLightGirl99

您需要創建對話框組件本身，然後顯示它被點擊的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> 
    ); 
    } 
}

來源

2017-10-10 13:40:32

想要一個對話窗口打開一次IconFont被點擊

回答

相關問題