Question

我添加了一个点击处理程序，以便当用户在我的模态之外单击时，它会关闭模态框。我在Gatsby.js项目中使用'react-outside-click-handler'来实现这一目标。

此点击处理程序运行正常，在框外点按时会关闭模式。但是，如果单击页面上的任意位置（当该模式不处于活动状态时），它也会切换该模式以激活。

有人可以为我指出正确的方向，如何在保持停用功能的同时停止激活模态吗？

也许我可以编写一条if语句来指定当状态为false时，外部点击不会切换模式吗？

页面：

export default class Contact extends Component {
  state = {
    modal: false,
  }

  modalToggle = () => {
    this.setState({ modal: !this.state.modal })
  }

  render = () => {
    return (
      <div className="temp_background">
        <div className="work_boxes">
          <OutsideClickHandler onOutsideClick={this.modalToggle}>
            <button
              className="place-order"
              style={{ backgroundImage: `url(${work_screenshot_2})` }}
              onClick={this.modalToggle}
            />
            <Modal onClick={this.modalToggle} status={this.state.modal} />
          </OutsideClickHandler>
        </div>
      </div>
    )
  }
}

模式部分：

export default class Modal extends Component {
  render() {
    return (
      <div>
        <div className="modal" data-status={this.props.status}>
          <div
            className="modal-left"
            style={{ backgroundImage: `url(${work_screenshot_2})` }}
          />
          <div className="modal-right">
            <h2>{this.props.title}</h2>
            <p>{this.props.description}</p>
            <button onClick={this.props.onClick} className="close">
              <span className="fa fa-close">x</span>
            </button>
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

您可以有条件地渲染它，但是您还应该在这里通过函数调用来使其更加明确。使用from Bio.Blast import NCBIWWW from Bio.Blast import NCBIXML with open('input.txt', 'r') as file: count = 1 #loop 1 for i in file: print("Sequence {} :{} Length: {}".format(count, i[:20], len(i))) count += 1 count -= 1 print("There are %d sequences." % count) # count = 10 #loop2 for i in range(count): seq = file.readline() print(seq) # try: # with open('dna_lab5_%d.xml' % i, 'r') as f: # print("Using saved file") # except FileNotFoundError: # print("Performing online BLAST search") # with open('dna_lab5_%d.xml' % i, 'w') as f: # print(seq) # # handle = NCBIWWW.qblast("blastn", "nt", seq) # # result = handle.read() # # f.write(result)调用可能更简洁，但不太明确则需要付出一定的代价。

通过使用两个单独的方法：toggleModal和openModal，您可以更清楚地看到代码在做什么。现在，如果您在closeModal组件中单击，则会关闭该模式。该方法还需要进行检查，以确保在进行更改之前已打开/关闭模态。

OutsideClickHandler

Answer 2

您可以有条件地渲染它：

render = () => {
    return (
      {this.state.modal ? (<div className="temp_background">
        <div className="work_boxes">
          <OutsideClickHandler onOutsideClick={this.modalToggle}>
            <button
              className="place-order"
              style={{ backgroundImage: `url(${work_screenshot_2})` }}
              onClick={this.modalToggle}
            />
            <Modal onClick={this.modalToggle} status={this.state.modal} />
          </OutsideClickHandler>
        </div>
      </div>) : null }
    )
  }

正如@LMulvey指出的那样，正确的方法是拥有单独的打开和关闭处理程序，并且绝对应该在更复杂的情况下以这种方式进行操作。但是对于这种简单的情况，我认为可以进行切换。

阻止外部点击激活Gatsby中的模式-在哪里放置“ react-outside-click-handler”？

2 个答案: