react让div隐藏，使用onClick={()=>{this.handleClick}}无效

Question

class Basic extends React.Component {

    constructor() {
        super();

        this.closeDiv = this.closeDiv.bind(this);
    }

    closeDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    }
    
    render() {
        var divStyle = {
            width: 1511,
            height: 1068,
            left: 207.7,
            top: 90.86,
            position: 'absolute'
        }



        return (
            <div>
                <div style={divStyle} className={'cs001'}>

                </div>

                {/* 弹出层时背景层DIV */}
                <div id = {'fade'} className = {'black_overlay'}>

                </div>

                <div id={'MyDiv'} className={'white_content'}>
                    <div id={'move'}>
                        <span className={'close'}
                              onClick={()=>{this.handleClick('MyDiv', 'fade')}}>
                            关闭
                        </span>
                    </div>
                    <div id={'newPage'}>
                        目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
                    </div>
                </div>
            </div>
        )
    }
}

Answer 1

我把你的例子改了下，你试试.

class Basic extends React.Component {

  constructor() {
    super();
    this.state = {show_div: true, bg_div: true}
  }

  render() {
    var divStyle = {
      width: 1511,
      height: 1068,
      left: 207.7,
      top: 90.86,
      position: 'absolute'
    }

    const {show_div, bg_div} = this.state;

    return (
      <div>
        <div style={divStyle} className={'cs001'}>

        </div>

        {/* 弹出层时背景层DIV */}
        <div id = {'fade'} className = {'black_overlay'} style={{display: bg_div ? 'block': 'none'}}>

        </div>

        <div id={'MyDiv'} className={'white_content'} style={{display: show_div ? 'block': 'none'}}>
          <div id={'move'}>
                        <span className={'close'}
                              onClick={()=> this.setState({bg_div: false, show_div: false})}>
                            关闭
                        </span>
          </div>
          <div id={'newPage'}>
            目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
          </div>
        </div>
      </div>
    )
  }
}

react中不要操作dom...

Answer 2

onClick={()=>{this.handleClick('MyDiv', 'fade')，这是事件名是不是写错了，我只看到closeDiv的

Answer 3

把onClick={()=>{this.handleClick('MyDiv', 'fade')}}换成 onClick={()=>{this.closeDiv('MyDiv', 'fade')}}>