Question

我有一个带有模式的React应用程序，单击一个按钮即可弹出游戏规则。我想做的就是做到这一点，因此当我单击此弹出窗口之外的任何位置时，它将关闭。我有三个文件。 app.js，dialog.js和outsidealerter.js。在我的主要app.js中，当我单击一个按钮时，它将状态设置为可见，因此我的元素将其获取并基于该状态进行呈现。我的outsideralerer.js基本上可以检测是否有任何点击被特定标签包裹了。现在问题来了，我有一个方法可以更改app.js中的可见性状态，因此为了让outsderalerter.js使用它，我将其传递给它，以便它可以访问我的主要状态并进行更改，以便当单击超出区域时，弹出窗口消失。种类繁多的作品除外，即使我在弹出窗口中单击也将其关闭，因为当我将值传递给外界时，它将整个身体视为无点击区域。我的问题是如何阻止它触发并仅将其传递一个值，或者是否可以从outsidealerter.js更改app.js的状态值

App.js

 updateState() {
  this.setState({ isOpen: false });
}

<div id='rule-button'>
<button onClick={(e)=>this.setState({isOpen : true})} id="modalBtn" class="button">Open Rules</button>
</div>

<OutsideAlerter updateParent={ this.updateState.bind(this)}/>

<Dialog isOpen={this.state.isOpen} onClose={(e)=>this.setState({isOpen : false})}>
</Dialog>

outsidealerter.js

handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      //alert('You clicked outside of me!');
     {this.props.updateParent()};
    }
  }

Answer 1

我认为让模态占据窗口高度和宽度的全部空间并使其不可见（除了要显示的内容之外）会更简单。

我们可以使用onClick={hideModal}包装模式，并使用onClick={e => e.stopPropagation()}包装内部内容，这将阻止我们的包装器触发hideModal处理程序。

class ModalWrapper extends React.Component {
  state = { isModalOpen: true };

  toggleModal = () => {
    this.setState(({ isModalOpen }) => ({
      isModalOpen: !isModalOpen
    }));
  };

  render() {
    const { isModalOpen } = this.state;

    return (
      <div className="App">
        <button onClick={this.toggleModal}>Open Modal</button>
        {isModalOpen && <Modal hideModal={this.toggleModal} />}
      </div>
    );
  }
}

function Modal({ hideModal }) {
  return (
    <div onClick={hideModal} className="modal">
      <div onClick={e => e.stopPropagation()} className="modal__content">
        Modal content
      </div>
    </div>
  );
}

Working example

如何在不触发回调的情况下将回调传递给孩子

1 个答案: