小编Via*_*mus的帖子

React 在同一组件中渲染多个模态

我对 React 和一般编码都很陌生。我试图在同一组件中渲染多个模态,但它们都是同时渲染的,因此看起来所有链接都在最后一个模态中渲染文本。
这是状态设置的地方:

class Header extends React.Component {
  constructor () {
    super();
    this.state = {open:false}
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.handleModalChangeEnter = this.handleModalChange.bind(this, true);
    this.handleModalChangeLogin = this.handleModalChange.bind(this, false);
  }
  openModal () {
    this.setState({open: true}); }
  closeModal () {
    this.setState({open: false}); }
  render() {
Run Code Online (Sandbox Code Playgroud)

这是模态结构:

return (
    <header style={home}>

    <div style={hello}>
      <img style={logo} src='public/ycHEAD.png'/>
      <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
    </div>

    <div style={subContainer}>
      <ul style={modalDirectory}>

        <Button onClick={this.openModal}
                style={openButton}>
          <li><a style={tabs}>Enter
              </a></li>
        </button>
        <Modal style={modalCont}
               isOpen={this.state.open}>
              <button …
Run Code Online (Sandbox Code Playgroud)

ecmascript-6 reactjs react-modal

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

ecmascript-6 ×1

react-modal ×1

reactjs ×1