Je voudrais qu'une fenêtre de dialogue s'ouvre une fois que l'on clique sur IconFont

Question

Je travaille avec React et je suis très novice en la matière. J'ai une page qui a un tas de FontIcons. Je voudrais que l'utilisateur clique sur une icône et fasse apparaître une boîte de dialogue. J'ai trouvé des informations sur la pièce de dialogue, http://www.material-ui.com/#/components/dialog. Je n'ai rien trouvé sur comment rendre l'action onclick rendre le composant de dialogue.

Je sais que je dois ajouter quelque chose ici ..

<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

Vous devez créer le composant de dialogue lui-même, puis le montrer lorsque l'utilisateur clique sur FontIcon (en utilisant la propriété onClick).

L'état de la boîte de dialogue peut être suivi à l'aide de l'objet d'état du composant et modifié via des méthodes de gestionnaire.

Voici un exemple basé sur le site de documentation:

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