在React中以编程方式打开一个html模式

Question

我有两个元素，一个是按钮，一个是对话框。

<dialog className='w-11/12 shadow-none rounded-tl-md rounded-tr-md lg:rounded-lg absolute'>wqdwe</dialog>

<button className=" px-6 py-2 rounded absolute mt-12 ml-12" onClick={} >Click</button>

如何打开React中点击按钮时的对话框？

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  showModals(){
this.myRef.showModal();
  }
  componentDidMount() {
   //this.showModals()
  }

EDIT: 我正试图访问 .showModal() 根据MDN，在对话框中的方法 https:/developer.mozilla.orgen-USdocsWebHTMLElementdialog。. 我怎样才能做到这一点，我需要当模式打开时，背景变暗的功能。

Answer 1

你不需要 componentDidMount 也不 useRef 随着 state 和使用道具 open 的 dialog 你可以有条件地显示它。

1. 第一个解决方案使用 isOpen 是 state

class Modal extends React.Component {
  constructor(props) {
    super(props);
  }
  
   render() {
    return (
      <dialog style={{width: "80%", height: "80%", marginTop: 10, backgroundColor: '#eee'}}
        open={this.props.open}
        >
        <p>Greetings, one and all!</p>
      </dialog>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false
    };
  }
  
  switchModal = (prevState) => {
    this.setState((prevState, props) => {
      return { isOpen: !prevState.isOpen }
    });
  }

 render() {
    return (
      <div>
        <button onClick={this.switchModal}>
          {this.state.isOpen ? 'Close' : 'Open'} Modal 
        </button>
        <br/>
        <Modal open={this.state.isOpen}/>
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>

2. 本位主义 showModal 方法。通过这个方法，你可以使用css属性的 dialog::backdrop.

class Modal extends React.Component {
  constructor(props) {
    super(props);
  }
 
   render() {
    return (
      <dialog id='modal' style={{width: "80%", height: "80%", marginTop: 10, backgroundColor: '#eee'}}
        >
        <p>Greetings, one and all!</p>
        <button onClick={this.props.closeModal}>
          Close Modal 
        </button>
      </dialog>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false
    };
  }
  
  switchModal = (prevState) => {
    this.setState((prevState, props) => {
      if(!prevState.isOpen) {
        document.getElementById('modal').showModal()
      } else {
        document.getElementById('modal').close()
      }
      return { isOpen: !prevState.isOpen }
    });
  }

 render() {
    return (
      <div>
        {!this.state.isOpen && <button onClick={this.switchModal}>
          Open Modal 
        </button>}
        <br/>
        <Modal 
          closeModal={this.switchModal}
          />
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'));

dialog {
  height: 80%;
  width: 80%
}

dialog::backdrop {
  background: rgba(255,0,0,.25);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>

Answer 2

您可以使用 React状态API 根据代码中其他地方的操作来显示和隐藏组件。

class MyComponent extends React.Component {

  constructor() {
    this.state = {
      isDialogVisible: false
    }
  }

  handleClick = () => {
    this.setState({ isDialogVisible: !this.state.isDialogVisible })
  }

  render() {
    const { isDialogVisible } = this.state
    return (
      <div>
        <Button onClick={this.handleClick}>{isDialogVisible ? 'Hide' : 'Show'} dialog</Button>
        {this.state.isDialogVisible && <Dialog />}
      </div>
   )
 }
}