IconFont를 클릭하면 대화 상자 창이 열립니다.

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> 
    ); 
    } 
}