Question

我正在尝试创建一个简单的配置对话框，在右上角带有关闭图标，但是我想不出如何在React中处理这个问题。在其他框架中，我可以简单地使用选择器，然后使用.showModal（）/ close（）打开/关闭对话框。但是，我认为我们不允许或不建议在React中直接操作DOM，所以我想知道在这种情况下正确的方法是什么。

我的项目大纲

App.js

class App extends Component {
  ...
  ...
  return(
    <div>
      <ConfigPage />
      <ConfigButton />
      <MainContents />
    </div>
  )
}

我想通过按我设置的<ConfigPage />打开一个对话框<ConfigButton />，然后通过按对话框上的图标将其关闭。

config-page.js

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

Answer 1

欢迎来到SO。您可以通过从render函数返回null来隐藏react组件。您可以在state中定义一个标志来确定天气是否可见。这是一个简单的例子。

class Modal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: true;
    };
    this.onCloseClick = this.onCloseClick.bind(this);
  }


  onCloseClick(e) {
    e.preventDefault();
    this.setState({
      isOpen: false,
    });
  }


  render(){
    if (!this.state.isOpen) return null;
    return (
      <div>
        <button onClick={this.onCloseClick}>
          Close
        </button>
        <h1>What up, this a modal</h1>
      <div>
    );
  }

}

Answer 2

HTML5对话框还具有open属性，对吗？除了调用show / hide，您还可以操纵此属性-

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog open={this.state.showDialog ? 'open' : false}>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

当您想显示/隐藏呼叫this.setState({showDialog: true})（或否）

这是一个带有概念证明的js小提琴：https://jsfiddle.net/n5u2wwjg/193969/

在React中操作HTML5对话框

2 个答案: