ReactJS Dialog mit Schließen-Schaltfläche

Question

möchte ich meine Schließen-Schaltfläche hinzufügen react Pop Up so habe ich diese Zeile

<button onClick = {$('.scoreboard-trigger').close}>Close</button> 

aber wenn ich Schaltfläche Schließen clik es nicht

hier nicht schließt

ist mein alle Komponente

import $ from 'jquery'; 
import React from 'react'; 

import { FormattedMessage } from 'util/IntlComponents'; 

import OkeyScoreboard from './OkeyScoreboard'; 

class OkeyScoreboardDialog extends React.Component { 
    componentDidMount() { 
    $('.scoreboard-trigger').leanModal({ 
     opacity: 0 
    }); 
    } 



    render() { 
    const { scoreboard, profiles } = this.props; 
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>; 

    return (<div id='scoreboardModal' 
     className='scoreboard-modal modal'> 

     <div className='modal-content'> 
      <h4 className='center'>{scoreboardTitle}</h4> 
      <OkeyScoreboard profiles={profiles} scoreboard={scoreboard}/> 
       <button onClick = {$('.scoreboard-trigger').close}>Close</button> 
     </div> 

     <div className='modal-footer'> 

     </div> 
    </div>); 
    } 
} 


class OkeyScoreboardDialogTrigger extends React.Component { 
    render() { 
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>; 

    return <a className='scoreboard-trigger modal-trigger btn blue-grey darken-3' 
       href='#scoreboardModal'> 
     {scoreboardTitle} 
    </a>; 
    } 
} 


export { OkeyScoreboardDialog }; 
export { OkeyScoreboardDialogTrigger }; 

Answer 1

ich glaube, Sie dies in Funktion wickeln sollte

$('.scoreboard-trigger').close 

in Funktion und übergeben sie in Taste onClick Methode, Ich schaffe das Beispiel wickeln Sie es in Funktion schließen und an die onClick passieren

import $ from 'jquery'; 
import React from 'react'; 

import { FormattedMessage } from 'util/IntlComponents'; 

import OkeyScoreboard from './OkeyScoreboard'; 

class OkeyScoreboardDialog extends React.Component { 
    componentDidMount() { 
    $('.scoreboard-trigger').leanModal({ 
     opacity: 0 
    }); 
    } 
    close() { 
    $('.scoreboard-trigger').close; 
    } 


    render() { 
    const { scoreboard, profiles } = this.props; 
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>; 

    return (<div id='scoreboardModal' 
     className='scoreboard-modal modal'> 

     <div className='modal-content'> 
      <h4 className='center'>{scoreboardTitle}</h4> 
      <OkeyScoreboard profiles={profiles} scoreboard={scoreboard}/> 
       <button onClick = {this.close()}>Close</button> 
     </div> 

     <div className='modal-footer'> 

     </div> 
    </div>); 
    } 
} 


class OkeyScoreboardDialogTrigger extends React.Component { 
    render() { 
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>; 

    return <a className='scoreboard-trigger modal-trigger btn blue-grey darken-3' 
       href='#scoreboardModal'> 
     {scoreboardTitle} 
    </a>; 
    } 
} 


export { OkeyScoreboardDialog }; 
export { OkeyScoreboardDialogTrigger };here