以编程方式在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>

如何在单击“反应”按钮时打开对话框？

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

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

编辑:我试图访问对话框中的.showModal()方法，根据MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog。我如何做到这一点，我需要模糊的背景功能，当模式打开。

Answer 1

您不需要componentDidMount或useRef与state，并且使用dialog的道具open，您可以有条件地显示它。

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>

​

1. 第二种解决方案使用本机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

您可以使用反应状态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>
   )
 }
}