Question

创建我的popin所有操作链接

时遇到了一些麻烦

我使用REACT JS

我有一个这样的按钮：

<button className="b-circle" onClick={() => this.openPopin()}></button>
<div className="u-200">Frequence</div>
{OpenPopin ? <PopinComponent />: ''}
openPopin() {
    this.setState({ openFrequency: true })
}

在popinComponent我有一个十字架，当我点击它时，我需要关闭popin，我需要检测到popin之外的点击以关闭它

你有任何解决方案来实现这一目标吗？什么是最好的方式？

由于

Answer 1

你可以通过prop＆＃39; clickevent＆＃39;到PopinComponent然后从那里触发onclick十字按钮并在该函数中调用此prop。像这样：

<button className="b-circle" onClick={this.openPopin.bind(this)}>
        </button>
        <div className="u-200">Frequence</div>
        {OpenPopin ? <PopinComponent clickevent={this.closePopin.bind(this)} />
           : ''}


  openPopin() {
    this.setState({ openFrequency: true })
  }

  closePopin(){
   this.setState({openFrequency: false})
  }

现在在PopinComponent中你可以在onClick中传递this.props.clickevent -

<button onClick={this.props.clickevent}>Close</button>

React Popin在外部点击

1 个答案: