Question

我是React的新手，我的代码设置如下，我想点击按钮让内容消失。希望有人可以帮我解决这个问题。我尝试使用状态，但是我没有得到我想要的结果，我也试过https://jsfiddle.net/uwadhwnr/无效。我现在真的很沮丧。

<div id="content" style="height:1000px">

<script type="text/jsx">



var styles = {
                container: {
                  height: '100vh',
                  width: '100%',
                  backgroundColor: 'blue',
                },
                title: {
                  textAlign: 'center',
                },
              modal: {
                display: 'block',
                position: 'fixed',
                zIndex: '1',
                paddingTop: '100px',
                left: '0',
                top: '0',
                width: '100vw',
                height: '100vh',
                overflow: 'auto',
                backgroundColor: 'rgb(0,0,0)',
                backgroundColor: 'rgba(0,0,0,0.4)',
            },
              modalContent: {
                      position: 'relative',
                      backgroundColor: '#fefefe',
                      margin: 'auto',
                      padding: '0',
                      border: '1px solid #888',
                      width: '80vw',


                  },
                  modalHeader: {
                    padding: '2px 16px',
                    backgroundColor: '#5cb85c',
                    color: 'white',
                },

                modalBody: {padding: '2px 16px'},

                modalFooter: {
                    padding: '2px 16px',
                    backgroundColor: '#5cb85c',
                    color: 'white',
                },
                upload: {
                  position: 'absolute',
                  right: '5%',
                  top: '5%',
                },
            };



            var PopUp = React.createClass({
              render: function() {
                return (
                  <div>
                  <i className="fa fa-plus-circle fa-3x" aria-hidden="true" style={styles.upload} onClick={this.handleClick}></i>
                  <div id="myModal" className="modal" style={styles.modal}>


                  <div className="modal-content" style={styles.modalContent}>
                    <div className="modal-header" style={styles.modalHeader}>
                      <h2>Modal Header</h2>
                    </div>
                    <div classN="modal-body" style={styles.modalBody}>
                      <p>Some text aa the Modal Body</p>
                      <p>Some other text...</p>
                    </div>
                    <div className="modal-footer" style={styles.modalFooter}>
                      <h3>Modal Footer</h3>
                    </div>
                  </div>
                  </div>
                  </div>
                );
              }
            });


            var FilterableProductTable = React.createClass({
              render: function() {
                return (
                  <div>
                    <PopUp />

                  </div>
                );
              }
            });

    React.render(
      <FilterableProductTable  />,
      document.getElementById('content'));
</script>

Answer 1

困难在于什么？只需使用此属性设置CSS类：

display: none

并通过在按钮单击上设置新状态来切换类。

以下是一个例子：https://jsfiddle.net/8aoue71m/

在React中将css显示块更改为none

1 个答案: