Question

我想在弹出的反应中添加关闭按钮，所以我添加了这行

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

但是当我关闭关闭按钮时它不会关闭

这是我的所有组件

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

我认为你应该将它包装在函数中

$('.scoreboard-trigger').close

在函数中并将其传递给按钮中的onClick方法，我创建示例将它包装在函数close中并将其传递给onClick

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

Answer 2

尝试使用reacjs-popup一个简单的react弹出窗口组件（3kb）

ReactJS对话框，带关闭按钮

2 个答案: