Question

我有一些弹出窗口或模态窗口。我希望按下按钮后它会关闭。 checkboox为true后，按钮将可见。帮帮我吧可能是我要向css添加一些内容，或者JS代码不正确。代码如下。

＆＃13;

class ModalWindow extends React.Component {
  constructor() {
    super();
    this.state = {
      open: false,
      checked: false
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked
    })
  }


  hide() {
    this.setState({
      open: false,
    });
  }

  show() {
    this.setState({
      open: true,
    });


  }

  componentDidMount() {
    this.show();
  }



  render() {
    const buttonContent = this.state.checked ?  <div className={s.showButton}>
      <button onClick={() => this.hide()} className={s.closeBtn}>Confirm yes yes</button>
    </div> : null;
    
    return (
      <div className={this.state.open ? 'show':'hide'}>
        <div className={s.modal}>

          <h2 className={s.modalText}>Some text in block</h2>
          <label>I want to confirm</label>
          <input type="checkbox" checked={this.state.checked} onChange={this.handleChange}/>
          {buttonContent}
        </div>
      </div>
    );
  }
}

export default withStyles(s)(ModalWindow);

＆＃13;

.modal {
  background:#fff;
  width: 350px;
  height: 200px;
  margin: 5% auto;
  padding: 5px 20px;
  position: relative;
  border: 2px solid #0000ee;

}

.hide {
display:none
}

.modalText {
  font-size: 18px;
  color: #000000;
}

label {
  margin:0 15px 0 0;
}

.closeBtn {
  display: block;
  position: absolute;
  bottom: 5px;
  width: 150px;
  height:50px;
  margin:0 0 0 100px;
  outline: none;
  color: #555;
  border: none;
  background: #000000;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

Answer 1

通过反应，您可以采用另一种方式隐藏和显示元素。你只是呈现它，或者你没有。因此，不是在模态对话框中设置状态来显示或隐藏模态对话框，而是应该在其外部具有一个属性，该属性决定是否呈现此对话框。你的React应该看起来像这样：

class ComponentWithModalDialog extends React.Component {
  render() {
    const {showModal} = this.props;


    if(showModal) {
      return <ModalWindow />
    }
    else {
      return <div>
        other content
      </div>
    }
  }
}

按下按钮后隐藏弹出窗口。反应Js

1 个答案: